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
+10-35Lines changed: 10 additions & 35 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,12 +6,10 @@ 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** 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.
10
10
11
11
<!-- Add an image here showing the Markdown Editor in edit mode with the toolbar visible -->
12
12
13
-
---
14
-
15
13
## Enabling Edit Mode
16
14
17
15
To start editing, click the **Edit** button in the preview toolbar. The toolbar expands to show formatting options, and you can start making changes right away.
@@ -22,8 +20,6 @@ To go back to the read-only view, click **Reader** (or **Done**) in the toolbar.
22
20
23
21
> Pro users start in Edit Mode by default when opening Markdown files.
24
22
25
-
---
26
-
27
23
## Toolbar
28
24
29
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.
@@ -32,8 +28,6 @@ On smaller screens, some toolbar buttons collapse into dropdown menus to save sp
32
28
33
29
<!-- Add an image here showing the full toolbar with all formatting options visible -->
34
30
35
-
---
36
-
37
31
## Text Formatting
38
32
39
33
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.
@@ -48,8 +42,6 @@ You can also select text and use the **floating format bar** that appears near y
48
42
49
43
<!-- Add an image here showing the floating format bar appearing above selected text -->
50
44
51
-
---
52
-
53
45
## Block Types
54
46
55
47
Use the **block type dropdown** in the toolbar to change the type of the current block. Options include:
@@ -59,30 +51,24 @@ Use the **block type dropdown** in the toolbar to change the type of the current
59
51
60
52
<!-- Add an image here showing the block type dropdown with heading options -->
61
53
62
-
---
63
-
64
54
## Lists
65
55
66
56
The toolbar has buttons for three types of lists:
67
57
68
-
-**Bullet list** -- unordered list
69
-
-**Numbered list** -- ordered list
70
-
-**Task list** -- checklist with checkboxes
58
+
-**Bullet list** - unordered list
59
+
-**Numbered list** - ordered list
60
+
-**Task list** - checklist with checkboxes
71
61
72
62
Click a list button to turn the current line into a list item, or to convert an existing list to a different type.
73
63
74
-
---
75
-
76
64
## Block Elements
77
65
78
66
You can insert these block-level elements from the toolbar:
79
67
80
-
-**Blockquote** -- a quoted block of text
81
-
-**Divider** -- a horizontal line
82
-
-**Code block** -- a fenced code block with an optional language picker
83
-
-**Table** -- inserts a new table (see [Table Editing](#table-editing))
84
-
85
-
---
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))
86
72
87
73
## Slash Menu
88
74
@@ -106,8 +92,6 @@ You can also use standard Markdown shortcuts as you type:
106
92
-` ``` ` for code blocks
107
93
-`---` for dividers
108
94
109
-
---
110
-
111
95
## Table Editing
112
96
113
97
When you insert a table, you can edit it directly in the preview. Click any cell to start typing in it. Use `Tab` to move to the next cell.
@@ -123,23 +107,19 @@ You can also click the **+ New row** button below the table to add a row.
123
107
124
108
<!-- Add an image here showing the table context menu with row and column options -->
125
109
126
-
---
127
-
128
110
## Images
129
111
130
112
You can add images in two ways:
131
113
132
-
-**From a URL**: Enter the image URL and alt text in a dialog
133
-
-**Upload from your computer**: Pick an image file from your device
114
+
-**From a URL** - enter the image URL and alt text in a dialog
115
+
-**Upload from your computer** - pick an image file from your device
134
116
135
117
Both options are available from the **Image** button in the toolbar or through the [Slash Menu](#slash-menu).
136
118
137
119
Click an image in the editor to see a popover with **Edit** and **Delete** buttons.
138
120
139
121
<!-- Add an image here showing the image popover with Edit and Delete buttons -->
140
122
141
-
---
142
-
143
123
## Links
144
124
145
125
To add a link, select some text and click the **Link** button in the toolbar (or press `Ctrl/Cmd + K`). Enter the URL in the floating input that appears and press `Enter`.
@@ -148,16 +128,12 @@ Click an existing link to see a popover showing the URL, with options to **Edit*
148
128
149
129
<!-- Add an image here showing the link popover with the URL, Edit button, and Remove button -->
150
130
151
-
---
152
-
153
131
## Mermaid Diagrams
154
132
155
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.
156
134
157
135
<!-- Add an image here showing a Mermaid diagram block in edit mode with the syntax editor and rendered preview -->
158
136
159
-
---
160
-
161
137
## Keyboard Shortcuts
162
138
163
139
| Action | Shortcut |
@@ -172,4 +148,3 @@ You can insert Mermaid diagram blocks through the toolbar or the [Slash Menu](#s
Copy file name to clipboardExpand all lines: docs/08-Features/06-Live Preview/04-markdown-live-preview.md
+6-41Lines changed: 6 additions & 41 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,59 +2,24 @@
2
2
title: Markdown Live Preview
3
3
---
4
4
5
-
When you open a Markdown file (`.md`), **Live Preview** shows a nicely formatted version of your document. As you type in the editor, the preview updates in real-time so you can see exactly how your Markdown will look.
5
+
When you open a Markdown file (`.md`), **Live Preview** shows a nicely formatted version of your document with syntax-highlighted code blocks, rendered Mermaid diagrams, and more. As you type in the editor, the preview updates in real-time.
6
6
7
7
<!-- Add an image here showing a Markdown file in the editor with its rendered Live Preview side by side -->
8
8
9
-
---
10
-
11
9
## Scroll and Cursor Sync
12
10
13
-
The editor and preview stay in sync as you work. When you scroll or move your cursor in the editor, the preview follows along to show the same section. This also works the other way around -- clicking a section in the preview scrolls the editor to the matching line.
11
+
The editor and preview stay in sync as you work. When you scroll or move your cursor in the editor, the preview follows along to show the same section. Clicking a section in the preview scrolls the editor to the matching line too.
14
12
15
13
You can turn sync on or off using the **cursor sync toggle***(link icon)* in the preview toolbar.
16
14
17
15
<!-- Add an image here showing the cursor sync toggle button in the toolbar -->
18
16
19
-
---
20
-
21
-
## Search
22
-
23
-
Press `Ctrl/Cmd + F` to open a search bar in the preview. Type your search term and use the arrow buttons to jump between matches. The preview highlights all matching text and shows a count of results.
24
-
25
-
Press `Esc` or click the close button to close the search bar.
26
-
27
-
---
28
-
29
-
## Theme Toggle
30
-
31
-
Click the **theme toggle** button *(sun/moon icon)* in the preview toolbar to switch between light and dark themes. Your choice is remembered across sessions.
32
-
33
-
<!-- Add an image here showing the theme toggle button and the preview in dark theme -->
34
-
35
-
---
36
-
37
-
## Code Blocks
38
-
39
-
Fenced code blocks are displayed with syntax highlighting. A **Copy** button appears on each code block so you can quickly copy the code.
40
-
41
-
---
42
-
43
-
## Mermaid Diagrams
44
-
45
-
Mermaid diagram blocks (` ```mermaid `) are rendered as visual diagrams in the preview.
46
-
47
-
---
48
-
49
-
## Print
50
-
51
-
Click the **Print** button in the preview toolbar to print your rendered Markdown document.
17
+
The preview toolbar also has a **theme toggle***(sun/moon icon)* to switch between light and dark themes, a **search** bar (`Ctrl/Cmd + F`), and a **print** button.
52
18
53
19
> Print is not available on macOS desktop apps.
54
20
55
-
---
56
-
57
-
## Editing Markdown
21
+
## Markdown Editor (Pro)
58
22
59
-
On**Phoenix Pro Edition**, you can edit your Markdown directly in the Live Preview using a rich text editor. See [Markdown Editor](../../Pro%20Features/markdown-editor) for details.
23
+
With**Phoenix Pro**, you can go beyond just viewing. Edit your Markdown directly in the Live Preview with a full rich text editor - format text, build tables, drag in images, add links, use slash commands to insert blocks, and much more. All your changes sync back to the source code automatically.
60
24
25
+
[Learn more about the Markdown Editor](../../Pro%20Features/markdown-editor)
0 commit comments