Skip to content

Commit 734381f

Browse files
committed
feat: remove live preview divider lines
1 parent 2bdddba commit 734381f

1 file changed

Lines changed: 0 additions & 13 deletions

File tree

  • docs/08-Features/08-Live Preview

docs/08-Features/08-Live Preview/index.md

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ The **Live Preview** feature in **Phoenix Code** provides instant feedback on ch
88

99
> For HTML files, Live Preview is enabled by default. For other file types, you might need to do some manual setup.
1010
11-
---
1211

1312
## Showing or Hiding Live Preview
1413

@@ -23,7 +22,6 @@ To customize the keyboard shortcut, see the [Keyboard Shortcuts Guide](../keyboa
2322

2423
![Live Preview toggle menu option](../images/livePreview/lp-menu.png "Live Preview toggle menu option")
2524

26-
---
2725

2826
## Understanding the Bolt Icon
2927

@@ -60,7 +58,6 @@ Phoenix Code also displays a connecting overlay while Live Preview is establishi
6058
6159
![Live Preview connecting overlay](../images/livePreview/lp-connecting-overlay.png "Live Preview connecting overlay")
6260
-->
63-
---
6461

6562
## Live Preview Toolbar
6663

@@ -76,7 +73,6 @@ Phoenix Code provides various options in the Live Preview toolbar.
7673

7774
* **Reload Live Preview** — Refreshes the Live Preview page. Use this when Live Preview lags behind or doesn't update with your code changes.
7875

79-
---
8076

8177
![Live Preview mode](../images/livePreview/lp-mode.png "Live Preview mode")
8278

@@ -92,7 +88,6 @@ Phoenix Code provides various options in the Live Preview toolbar.
9288

9389
- **Edit Mode** *(Pro)*: Edit elements directly in the preview-change text, drag elements, swap images, and more. Phoenix Code updates your source code automatically. [Learn more](../../Pro%20Features/edit-mode-live-preview).
9490

95-
---
9691

9792
<VideoPlayer
9893
src="https://docs-images.phcode.dev/videos/live-preview/preview-mode-btn.mp4"
@@ -102,45 +97,38 @@ Phoenix Code provides various options in the Live Preview toolbar.
10297
Clicking the button switches to **Preview Mode**. On **Phoenix Pro Edition**, a second click returns to **Edit Mode**. On **Phoenix Community Edition**, a second click switches to **Highlight Mode**.
10398
You can also use the keyboard shortcut `F8` to toggle Preview Mode.
10499

105-
---
106100

107101
![Live Preview pin](../images/livePreview/lp-pin.png "Live Preview pin")
108102

109103
* **Pin or Unpin Preview Page** — Pin a file in Live Preview so it remains displayed even when you switch to other files. Click again to unpin.
110104

111-
---
112105

113106
![Live Preview filename](../images/livePreview/lp-filename.png "Live Preview filename")
114107

115108
* **File Name** — Displays the name of the currently previewed file. Click it to open that file in the editor (if not already open).
116109

117-
---
118110

119111
![Live Preview popout](../images/livePreview/lp-popout.png "Live Preview popout")
120112

121113
* **Pop Out to New Window** — Opens Live Preview in your default browser. This is helpful when you want to see how your page looks in a full browser window.
122114

123-
---
124115

125116
![Live Preview browsers](../images/livePreview/lp-browsers.png "Live Preview browsers")
126117

127118
* **Browser Icons** — Select a specific browser icon to open the page in that browser. This helps you see how your page looks across different browsers. The icons are hidden by default. You need to hover over the toolbar to reveal them.
128119
> This option is available only in Desktop apps.
129120
130-
---
131121

132122
![Live Preview settings](../images/livePreview/lp-setting.png "Live Preview settings")
133123

134124
* **Live Preview Settings** — Located at the right-most side of the toolbar. [Read more about Live Preview Settings](./live-preview-settings/#accessing-live-preview-settings).
135125

136-
---
137126

138127
<!-- Add an image here showing the Device Size Presets button in the toolbar -->
139128

140129
* **Device Size Presets** — A device icon button at the right side of the toolbar. Click it to see a list of common device widths (phones, tablets, and desktops). Pick a device to resize the Live Preview panel to that width. The button icon changes to match the current width category.
141130
On **Phoenix Pro Edition**, the dropdown also shows CSS breakpoints picked up from your page's stylesheets. See [Resize Ruler](../../Pro%20Features/resize-ruler) for details.
142131

143-
---
144132

145133
## Using Live Preview with HTML Files
146134

@@ -150,7 +138,6 @@ Phoenix Code provides various options in the Live Preview toolbar.
150138

151139
> If changes don't appear, reload Live Preview and wait until the bolt icon turns full yellow.
152140
153-
---
154141

155142
## Live Preview Demonstrated
156143

0 commit comments

Comments
 (0)