How to edit Markdown files in VSCode with live preview of changes

Visual Studio Code (VSCode) is a great tool for editing Markdown files. It’s not immediately obvious that VSCode comes out of the box with the capability to preview Markdown files and even provide a side by side live preview view so you can see the result as you are modifying the file.

In VSCode opening the file will provide the standard file editing experience (as shown on the right hand side of the image below). Without having to remember VSCode keyboard shortcuts, you can simply right click the markdown file and select Open Preview.

vscode-markdown-preview-01-open-preview-cameron-dwyer.png

This will result in the preview of the markdown file being opened in a new tab.

vscode-markdown-preview-02-markdown-in-visual-studio-code-cameron-dwyer.png

We can go one step further using the Split Editor button in VSCode to get both the editing experience and preview side by side.

vscode-markdown-preview-03-split-editor-markdown-in-visual-studio-code-cameron-dwyer.png

You now have a live preview, any changes made in the editor (left side) are immediately reflected in the preview (right side)

vscode-markdown-preview-04-live-preview-editing-markdown-in-vscode-cameron-dwyer.png

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: