Skip to content

Commit 9122088

Browse files
committed
feat: add assets for markdown live preview docs
1 parent 4727d76 commit 9122088

2 files changed

Lines changed: 10 additions & 2 deletions

File tree

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
11
---
22
title: Markdown Live Preview
33
---
4+
import React from 'react';
5+
import VideoPlayer from '@site/src/components/Video/player';
46

57
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.
68

7-
<!-- Add an image here showing a Markdown file in the editor with its rendered Live Preview side by side -->
9+
![Markdown Live Preview](../images/livePreview/markdown-preview.png "A Markdown file open in the editor with its rendered Live Preview alongside")
810

911
## Scroll and Cursor Sync
1012

1113
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.
1214

1315
You can turn sync on or off using the **cursor sync toggle** *(link icon)* in the preview toolbar.
1416

15-
<!-- Add an image here showing the cursor sync toggle button in the toolbar -->
17+
<VideoPlayer
18+
src="https://docs-images.phcode.dev/videos/markdown/toggle-cursor-sync.mp4"
19+
/>
1620

1721
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.
1822

@@ -22,4 +26,8 @@ The preview toolbar also has a **theme toggle** *(sun/moon icon)* to switch betw
2226

2327
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.
2428

29+
<VideoPlayer
30+
src="https://docs-images.phcode.dev/website/videos/markdown-pro-dialog.mp4"
31+
/>
32+
2533
[Learn more about the Markdown Editor](../../Pro%20Features/markdown-editor)
274 KB
Loading

0 commit comments

Comments
 (0)