Can VSCode display a Markdown syntax preview pane?

Question

I am typing a README document in Markdown using Visual Studio Code. I found an online browser-based tool called Markdown Live Preview , but I was wondering if VSCode had any sort of handy split-window pane already built into it.

Answer 1

Make sure that your document is saved as a Markdown file in VSCode:

File > Save as > README.md (The text will be color-coded.)

In the top right corner of VSCode, click the "Split Editor" icon to enable side-by-side editing.

Click the "Open Preview" magnifying glass icon to view a live preview of your Markdown syntax that updates as you type!

Answer 2

The "Mouse-Clicks" way seems inefficient, try vscode pre-defined keybind as markdown.showPreviewToSide :

ctrl+k v

which means when you are editing a markdown file, press Ctrl+k , then loosen both and press v , it comes a preview of current markdown file in the other splited side.

Answer 3

Another command that can be used is "Markdown: Open Preview" which can be called both from intellisence ( ctrl + shift + p , start typing "Markdown" to see available commands) or by a direct keybinding: default is ctrl + shift + v , custom may be set at Keyboard Shortcuts ( ctrl + k ctrl + s ).

However, this command opens the preview in another tab, so if you need splitted window, you'll need to do it manually or by some other hotkeys.

Answer 4

Allow me to point out an alternate way of working with Markdown in vscode. The extension "Instant Markdown" will launch a local browser preview on :1090 (I believe) that allows you to position the render wherever you like. This is a pleasant way of watching the document grow in real time in a format that is much more like what you would see on Github for example. The preview pane in VSCode is a bit too dissimilar to the real thing for my taste.