You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/07-Pro Features/05-markdown-editor.md
+9-39Lines changed: 9 additions & 39 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ title: Markdown Editor
6
6
[Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature.
7
7
:::
8
8
9
-
The **Markdown Editor**lets you edit Markdown files directly in the Live Preview using a rich text editor. You can format text, add images, create tables, insert links, and more, all without writing Markdown syntax by hand. Your changes are automatically synced back to the source code.
9
+
The **Markdown Editor**brings a full rich text editing experience to Markdown files, right inside the Live Preview. Format text, build tables, drop in images, add links, use slash commands - and watch every change sync back to your source code instantly.
10
10
11
11
<!-- Add an image here showing the Markdown Editor in edit mode with the toolbar visible -->
12
12
@@ -20,14 +20,6 @@ To go back to the read-only view, click **Reader** (or **Done**) in the toolbar.
20
20
21
21
> Pro users start in Edit Mode by default when opening Markdown files.
22
22
23
-
## Toolbar
24
-
25
-
The toolbar appears at the top of the preview when you enter Edit Mode. It gives you quick access to all the formatting and editing tools described below.
26
-
27
-
On smaller screens, some toolbar buttons collapse into dropdown menus to save space.
28
-
29
-
<!-- Add an image here showing the full toolbar with all formatting options visible -->
30
-
31
23
## Text Formatting
32
24
33
25
Select the text you want to format and click a formatting button, or use the keyboard shortcut. If no text is selected, the formatting applies to the word at your cursor.
@@ -42,41 +34,25 @@ You can also select text and use the **floating format bar** that appears near y
42
34
43
35
<!-- Add an image here showing the floating format bar appearing above selected text -->
44
36
45
-
## Block Types
37
+
## Blocks and Lists
46
38
47
-
Use the **block type dropdown**in the toolbar to change the type of the current block. Options include:
39
+
The toolbar lets you change the current block type using a **block type dropdown**(Paragraph, Heading 1 through Heading 5) and insert different types of content:
48
40
49
-
- Paragraph
50
-
- Heading 1 through Heading 5
41
+
-**Bullet list**, **Numbered list**, **Task list** (checklist with checkboxes)
42
+
-**Blockquote**, **Divider** (horizontal line)
43
+
-**Code block** with an optional language picker
44
+
-**Table** (see [Table Editing](#table-editing))
45
+
-**Mermaid diagram** with a syntax editor and live rendered preview
51
46
52
47
<!-- Add an image here showing the block type dropdown with heading options -->
53
48
54
-
## Lists
55
-
56
-
The toolbar has buttons for three types of lists:
57
-
58
-
-**Bullet list** - unordered list
59
-
-**Numbered list** - ordered list
60
-
-**Task list** - checklist with checkboxes
61
-
62
-
Click a list button to turn the current line into a list item, or to convert an existing list to a different type.
63
-
64
-
## Block Elements
65
-
66
-
You can insert these block-level elements from the toolbar:
67
-
68
-
-**Blockquote** - a quoted block of text
69
-
-**Divider** - a horizontal line
70
-
-**Code block** - a fenced code block with an optional language picker
71
-
-**Table** - inserts a new table (see [Table Editing](#table-editing))
72
-
73
49
## Slash Menu
74
50
75
51
Type `/` at the start of an empty line to open the **Slash Menu**. This gives you a quick way to insert any block type without reaching for the toolbar.
76
52
77
53
<!-- Add an image here showing the Slash Menu with the list of available items -->
78
54
79
-
The menu shows all available block types: paragraphs, headings, lists, blockquotes, code blocks, tables, dividers, mermaid diagrams, and images. Start typing to filter the list. Use the arrow keys to navigate and press `Enter` to insert.
55
+
Start typing to filter the list. Use the arrow keys to navigate and press `Enter` to insert.
80
56
81
57
> The Slash Menu learns from your usage and shows your most-used items first.
82
58
@@ -128,12 +104,6 @@ Click an existing link to see a popover showing the URL, with options to **Edit*
128
104
129
105
<!-- Add an image here showing the link popover with the URL, Edit button, and Remove button -->
130
106
131
-
## Mermaid Diagrams
132
-
133
-
You can insert Mermaid diagram blocks through the toolbar or the [Slash Menu](#slash-menu). In Edit Mode, Mermaid blocks show a syntax editor where you write the diagram code, with a live preview of the rendered diagram. Click **Edit** or **Done** to toggle between the code and the preview.
134
-
135
-
<!-- Add an image here showing a Mermaid diagram block in edit mode with the syntax editor and rendered preview -->
0 commit comments