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/02-Live Preview/06-markdown-editor.md
+38-35Lines changed: 38 additions & 35 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,33 +2,56 @@
2
2
title: Markdown Editor
3
3
slug: "/Pro Features/markdown-editor"
4
4
---
5
-
6
5
import React from 'react';
7
6
import VideoPlayer from '@site/src/components/Video/player';
8
7
8
+
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. With **Phoenix Pro**, you can go a step further and edit your Markdown directly in the preview with a full rich text editor.
9
+
10
+
![Markdown Live Preview](../images/livePreview/markdown-preview.png"A Markdown file open in the editor with its rendered Live Preview alongside")
11
+
12
+
## Scroll and Cursor Sync
13
+
14
+
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 line in the preview scrolls the editor to the matching line and briefly highlights it, so you can see where you landed. Scrolling in either view keeps the other in step.
15
+
16
+
You can turn sync on or off using the **cursor sync toggle***(link icon)* in the preview toolbar.
The preview toolbar also has a **theme toggle***(sun/moon icon)* to switch between light and dark themes, a **search** bar (`Ctrl/Cmd + F`) to find text in the document, and a **print** button.
25
+
26
+
![Theme toggle button in the markdown toolbar with tooltip](../images/pro/markdown-theme-toggle.png"The theme toggle in the markdown toolbar")
27
+
28
+
> Print is not available on macOS desktop apps.
29
+
30
+
## Editing Markdown (Pro)
31
+
9
32
:::info Pro Feature
10
33
[Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature.
11
34
:::
12
35
13
-
Phoenix Code supports a full rich text editing experience for 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.
36
+
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, drop in images, add links, use slash commands to insert blocks, and much more. Every change syncs back to your source code instantly.
Open any `.md` file and you get a beautiful WYSIWYG editor that stays perfectly in sync with the source.
22
45
23
46
-**[Type the way you read](#text-formatting)** — bold, headings, lists, blockquotes, and tables work like in any modern document editor.
24
47
-**[Slash menu](#slash-menu)** (`/`) inserts blocks, images, tables, and more without remembering syntax.
25
48
-**[Tables](#table-editing)** with right-click row/column controls and easy copy/paste.
26
49
-**[Drop or paste images](#images)** straight into your document.
27
-
-**Find in document** with `Ctrl+F`, **[print](#theme-and-print)** with a clean light theme.
28
-
-**[Dark and light themes](#theme-and-print)** match the rest of the app.
29
-
-**[Side-by-side sync](#cursor-sync)** — your source view and rich view scroll, select, and edit together.
50
+
-**Find in document** with `Ctrl+F` and **[print](#theme-search-and-print)** with a clean light theme.
51
+
-**[Dark and light themes](#theme-search-and-print)** match the rest of the app.
52
+
-**[Side-by-side sync](#scroll-and-cursor-sync)** — your source view and rich view scroll, select, and edit together.
30
53
31
-
## Enabling Edit Mode
54
+
###Enabling Edit Mode
32
55
33
56
To start editing, click the **Edit** button on the right side of the markdown toolbar. The toolbar expands to show formatting options, and you can start making changes right away.
34
57
@@ -38,27 +61,7 @@ To go back to the read-only view, click **Reader** in the same place.
38
61
39
62
> By default, markdown files open in Edit mode for **Phoenix Code Pro** users.
40
63
41
-
## Cursor Sync
42
-
43
-
Click anywhere in the preview to jump the editor cursor to the matching line. The line briefly highlights so you can see where you landed. Cursor sync works in the other direction too. Clicking a line in the editor scrolls the preview to that line.
44
-
45
-
Scrolling in either view does the same: the other view follows along to keep you in sync.
46
-
47
-
Use the **cursor sync** button in the toolbar to toggle this behavior on or off.
You can also switch the markdown preview between light and dark themes using the **theme toggle** in the toolbar, or print the rendered document with the **print** button.
56
-
57
-
![Theme toggle button in the markdown toolbar with tooltip](../images/pro/markdown-theme-toggle.png"The theme toggle in the markdown toolbar")
58
-
59
-
> Print is not available on macOS desktop apps.
60
-
61
-
## Text Formatting
64
+
### Text Formatting
62
65
63
66
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.
64
67
@@ -72,7 +75,7 @@ You can also select text and use the **floating format bar** that appears near y
72
75
73
76
![Floating format bar above selected text](../images/pro/markdown-format-bar.png"The floating format bar appears near your selection")
74
77
75
-
## Blocks and Lists
78
+
###Blocks and Lists
76
79
77
80
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:
78
81
@@ -84,7 +87,7 @@ The toolbar lets you change the current block type using a **block type dropdown
84
87
85
88
![Markdown toolbar with block type dropdown and block insertion buttons](../images/pro/markdown-blocks-lists.png"The markdown toolbar in Edit mode")
86
89
87
-
## Slash Menu
90
+
###Slash Menu
88
91
89
92
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.
90
93
@@ -94,7 +97,7 @@ Start typing to filter the list. Use the arrow keys to navigate and press `Enter
94
97
95
98
> The Slash Menu shows your most-used items first.
96
99
97
-
### Markdown Shortcuts
100
+
####Markdown Shortcuts
98
101
99
102
You can also use standard Markdown shortcuts as you type:
100
103
@@ -106,7 +109,7 @@ You can also use standard Markdown shortcuts as you type:
106
109
-` ``` ` for code blocks
107
110
-`---` for dividers
108
111
109
-
## Table Editing
112
+
###Table Editing
110
113
111
114
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.
112
115
@@ -123,7 +126,7 @@ You can also click the **+ New row** button below the table to add a row.
Paste images into Markdown like you would in a document editor.
129
132
@@ -145,7 +148,7 @@ The **Upload from Computer** and **Image URL** options are available from the **
145
148
146
149
Click an image in the editor to see a popover with **Edit** and **Delete** buttons.
147
150
148
-
## Links
151
+
###Links
149
152
150
153
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`.
151
154
@@ -155,7 +158,7 @@ Click an existing link to see a popover showing the URL, with options to **Edit*
0 commit comments