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/13-Features/07-Live Preview/index.md
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,7 +18,7 @@ To show or hide Live Preview, click the **Lightning Bolt** icon at the top of th
18
18
19
19
Alternatively, toggle from `File > Live Preview` or use the keyboard shortcut (default: `Ctrl + Alt + L` on Windows/Linux, `Cmd + Alt + L` on macOS).
20
20
21
-
To customize the keyboard shortcut, see the [Keyboard Shortcuts Guide](../keyboard-shortcuts).
21
+
To customize the keyboard shortcut, see the [Keyboard Shortcuts Guide](./keyboard-shortcuts).
22
22
23
23

24
24
@@ -75,22 +75,22 @@ The left side of the toolbar groups three controls:
75
75
76
76
***Reload Live Preview**: The leftmost icon is the reload icon. Clicking on it refreshes the Live Preview. It is useful when Live Preview gets out of sync with your code.
77
77
78
-
***Design Mode**: The maximize icon after the reload button is for Design Mode. This mode hides the editor and expands the Live Preview to take over the full window, giving you more room to work on the page with [Edit Mode](../../Pro%20Features/live-preview-edit) or [Phoenix Code AI](../../Pro%20Features/ai-chat). Click the icon again to exit Design Mode.
78
+
***Design Mode**: The maximize icon after the reload button is for Design Mode. This mode hides the editor and expands the Live Preview to take over the full window, giving you more room to work on the page with [Edit Mode](../Pro%20Features/live-preview-edit) or [Phoenix Code AI](../Pro%20Features/ai-chat). Click the icon again to exit Design Mode.
79
79
80
-
***Live Preview Modes**: The pen icon lets you quickly switch between [Edit Mode](../../Pro%20Features/live-preview-edit) and Preview Mode. The pen lights up when Edit Mode is active. You can also press `F8` to toggle between these two modes.
80
+
***Live Preview Modes**: The pen icon lets you quickly switch between [Edit Mode](../Pro%20Features/live-preview-edit) and Preview Mode. The pen lights up when Edit Mode is active. You can also press `F8` to toggle between these two modes.
81
81
82
82
For more mode options, click the chevron next to the pen icon. This opens a dropdown where you can select from all available Live Preview modes:
-**Preview Mode**: View-only. The page behaves like a normal browser but still updates as you edit code. All interactions with the page (clicks, hovers, etc.) are disabled.
87
87
-**Highlight Mode**: Click any element to see its paddings and margins. Phoenix Code also jumps to that element in your source code so you can start editing right away.
88
-
-**Edit Mode**: Edit elements directly in the preview. Insert elements, change text, drag elements, swap images, and more. Phoenix Code updates your source code automatically. [Learn more](../../Pro%20Features/live-preview-edit).
88
+
-**Edit Mode**: Edit elements directly in the preview. Insert elements, change text, drag elements, swap images, and more. Phoenix Code updates your source code automatically. [Learn more](../Pro%20Features/live-preview-edit).
89
89
90
90
When Edit Mode is active, two extra options appear in the same dropdown:
91
91
92
-
-**Inspect Element on Hover**: Highlights elements as you hover, instead of only on click. This option is enabled by default. [Learn more](../../Pro%20Features/live-preview-edit#inspect-element-on-hover).
93
-
-**Show Measurements**: Displays ruler lines from the edges of the selected element to the edges of the Live Preview, with labels showing the exact pixel positions. This option is disabled by default. [Learn more](../../Pro%20Features/measurements).
92
+
-**Inspect Element on Hover**: Highlights elements as you hover, instead of only on click. This option is enabled by default. [Learn more](../Pro%20Features/live-preview-edit#inspect-element-on-hover).
93
+
-**Show Measurements**: Displays ruler lines from the edges of the selected element to the edges of the Live Preview, with labels showing the exact pixel positions. This option is disabled by default. [Learn more](../Pro%20Features/measurements).
@@ -123,9 +123,9 @@ The center section of the toolbar groups three controls for the currently previe
123
123
124
124
The right end of the toolbar has two controls:
125
125
126
-
***Live Preview Settings**: The gear icon on the left. Clicking it opens the Live Preview settings dialog. This icon is hidden by default and only appears when you hover over the toolbar. [Read more about Live Preview Settings](./live-preview-settings/#accessing-live-preview-settings).
126
+
***Live Preview Settings**: The gear icon on the left. Clicking it opens the Live Preview settings dialog. This icon is hidden by default and only appears when you hover over the toolbar. [Read more about Live Preview Settings](./Live%20Preview/live-preview-settings#accessing-live-preview-settings).
127
127
128
-
***Device Preview**: Resize the Live Preview to common phone, tablet, and desktop widths, or snap to your CSS breakpoints. Click the icon to cycle through sizes, or click the chevron for the full list. See [Device Preview](../../Pro%20Features/device-preview) for more.
128
+
***Device Preview**: Resize the Live Preview to common phone, tablet, and desktop widths, or snap to your CSS breakpoints. Click the icon to cycle through sizes, or click the chevron for the full list. See [Device Preview](../Pro%20Features/device-preview) for more.
Copy file name to clipboardExpand all lines: docs/13-Features/10-syntax-highlighting.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -32,7 +32,7 @@ Syntax Highlighting Example [Theme : `Monokai Dark Soda`]
32
32
Syntax Highlighting Example [Theme : `Material Color Light`]
33
33

34
34
35
-
To learn more about Themes. [Click Here](./themes)
35
+
To learn more about Themes. [Click Here](../customizing-editor#themes)
36
36
37
37
38
38
## Add Syntax Highlighting for a Particular File Type
0 commit comments