Preview Markdown in VS Code: Shortcuts and Extensions

Quick Summary

VS Code can preview Markdown without any extension. Learn the shortcuts, side-by-side mode, scroll sync, useful settings and the extensions worth installing.

Visual Studio Code includes a Markdown preview, so you do not need an extension to see how a .md file will look. This guide covers the shortcuts, a few settings that save time, and the extensions that add features VS Code does not have on its own.

Open the preview

Action	Windows and Linux	macOS
Open preview in the same tab	Ctrl + Shift + V	Cmd + Shift + V
Open preview beside the editor	Ctrl + K, then V	Cmd + K, then V

You can also open the Command Palette (Ctrl or Cmd + Shift + P) and run Markdown: Open Preview or Markdown: Open Preview to the Side. While a Markdown file is open there is also a preview icon in the top right of the editor.

Scroll sync

The preview follows the editor as you scroll, and the editor follows the preview. These behaviors are controlled by the settings markdown.preview.scrollPreviewWithEditor and markdown.preview.scrollEditorWithPreview.

Settings that are worth changing

markdown.preview.breaks: turn it on if you want a single line break to appear as a line break, as it does on GitHub comments.
markdown.preview.fontSize: make the preview text larger or smaller.

Open Settings with Ctrl or Cmd + comma and search for markdown preview.

Extensions that add real features

Markdown All in One: keyboard shortcuts for bold and italic, automatic table of contents, list editing helpers.
Markdown Preview Enhanced: a richer preview with math, diagrams and export options.
Markdown Preview Mermaid Support: renders Mermaid diagrams in the built-in preview.
markdownlint: warns about inconsistent or invalid Markdown as you write.
Markdown PDF: exports a file to PDF or HTML.

Install an extension from the Extensions view (Ctrl or Cmd + Shift + X). Only install what you will use; each extension adds startup work.

Preview without installing VS Code

On a machine where you cannot install software, paste or open the file in the online Markdown viewer. VS Code for the Web (vscode.dev) also offers a Markdown preview in the browser.

Why the preview may look different from GitHub

VS Code, GitHub and other tools each implement Markdown a little differently. Footnotes, alerts and math are common differences. For a README, check the final result on GitHub itself before you publish. More on that in How to write and preview a README.md.