How to Preview Markdown in VS Code: Shortcuts & Settings

Open the preview: shortcuts and commands

You can also click the preview icon in the editor’s title bar, or right-click the file’s tab and choose Open Preview. Commands without a default shortcut are in the Command Palette (Ctrl+Shift+P / ⇧⌘P) — you can bind your own keys to them in Keyboard Shortcuts.

Follow the active file, or lock the preview

By default a preview is dynamic: when you switch to another Markdown file, the preview switches with you. When you want a preview to stay on one document — for example while editing a file that links to it — open it with Markdown: Open Locked Preview to the Side, or run Markdown: Toggle Preview Locking while the preview tab is active. Locked previews show [Preview] in their tab title.

Open .md files (and diffs) in preview by default

If you mostly read Markdown, make the preview the default editor for .md files. This also renders Markdown diffs from the Source Control view as a formatted, highlighted preview instead of raw text:

"workbench.editorAssociations": {
  "*.md": "vscode.markdown.preview.editor"
}

To use the rendered view only for diffs, put the same mapping in workbench.diffEditorAssociations instead. For a one-off, run View: Reopen Editor With… and pick Markdown Preview.

Scroll sync and navigation settings

These are the preview settings and their defaults in VS Code 1.141. The two most useful changes are turning on doubleClickToSwitchToEditor (off by default) and markEditorSelection.

Math and Mermaid diagrams (built in)

Math is rendered with KaTeX: $...$ for inline and $$...$$ for blocks. It’s on by default (markdown.math.enabled). You can define shortcuts for commands you use often with markdown.math.macros:

"markdown.math.macros": {
  "\\RR": "\\mathbb{R}"
}

Mermaid diagrams in ```mermaid blocks render in the built-in preview since VS Code 1.121 — no extension needed. Hold Alt (Option) and drag to pan or scroll to zoom, or use the controls that appear on hover. The diagram theme follows VS Code by default; change it with markdown-mermaid.lightModeTheme and markdown-mermaid.darkModeTheme. Test tricky diagrams in our Mermaid previewer and formulas in the LaTeX previewer.

Make the preview look like GitHub

VS Code’s own documentation is clear that the preview targets CommonMark (via markdown-it), not GitHub Flavored Markdown. In practice that means:

Matt Bierner’s GitHub Markdown Preview pack (bierner.github-markdown-preview) installs GitHub styling plus emoji, checkboxes, and footnotes. It changes how the preview looks, not how VS Code parses Markdown, so for GitHub-only syntax — alerts, ```math blocks, and the exact README rendering — check the file in our GitHub Markdown Preview or on github.com. If a README renders differently on GitHub, see why GitHub Markdown isn’t rendering.

Built-in features that save time

• Jump to a heading. Ctrl+Shift+O (⇧⌘O) lists the headings in the current file; Ctrl+T (⌘T) searches headings across the whole workspace. The Outline view in the Explorer shows the heading tree.
• Path completions. Type ./ or / inside a link or image to get file suggestions, or # to link to a heading. Type ## to link to a heading in another file.
• Paste and drop images. Paste an image, or drag a file from the Explorer while holding Shift, and VS Code inserts the Markdown link — copying files from outside the workspace into it. Choose where they go with markdown.copyFiles.destination.
• Link validation. Off by default. With "markdown.validate.enabled": true, VS Code warns about links to missing files and headings (local links only).
• Rename headings safely. Press F2 on a heading to rename it and update every link that points to it — even in other files.
• Update links when files move. Set markdown.updateLinksOnFileMove.enabled to "prompt" or "always" (default "never") to fix links when you rename or move files.

Fonts and custom CSS

Adjust the basics with markdown.preview.fontFamily, markdown.preview.fontSize (default 14) and markdown.preview.lineHeight (default 1.6). For full control, point markdown.styles at a stylesheet — an https URL or a path relative to the folder open in the Explorer:

"markdown.styles": ["styles/markdown-preview.css"]

Dark mode and printing

The built-in preview follows your color theme: switch VS Code to a dark theme (Preferences: Color Theme) and the preview turns dark too. With the GitHub styling extension installed, choose its theme explicitly with markdown-preview-github-styles.colorTheme — for example a single light theme for screenshots — and pick from GitHub’s light, dark, dimmed, high-contrast, and color-blind themes.

VS Code has no print command for the preview. To print, export to PDF with an extension (below) and print that, or paste the file into our online previewer and use Export → PDF, which opens your browser’s print dialog with GitHub-style formatting.

Export to PDF or HTML

VS Code doesn’t export Markdown on its own. Your options: the Markdown PDF extension (PDF, HTML, PNG, JPEG), Markdown Preview Enhanced (its own preview with export and presentation modes), or — without installing anything — paste the file into our online previewer and use Export for HTML, a print-ready PDF, or PNG.

Cursor, Windsurf, Antigravity & VSCodium

Cursor, Windsurf, and Google Antigravity are forks of VS Code, and VSCodium is built from VS Code’s source. They inherit its built-in Markdown preview, so everything in this guide applies: open the Command Palette and run Markdown: Open Preview to the Side. The default shortcuts (Ctrl+Shift+V, Ctrl+K V) usually carry over, but forks can rebind keys — if a shortcut does something else, search “Markdown: Open Preview” in Keyboard Shortcuts to see or set the binding. Features added in recent VS Code releases (such as built-in Mermaid) appear in a fork only after it updates to that VS Code version. Using Visual Studio, a JetBrains IDE, Zed, Sublime Text, or Neovim instead? See how to preview Markdown in any editor.

Recommended settings.json

Open it with Preferences: Open User Settings (JSON) from the Command Palette. Every key below exists in VS Code 1.141; settings already at a sensible default are left out.

{
  // Preview behavior
  "markdown.preview.doubleClickToSwitchToEditor": true,
  "markdown.preview.markEditorSelection": true,

  // Catch broken links to files and headings while you type
  "markdown.validate.enabled": true,

  // Keep links working when you move or rename files
  "markdown.updateLinksOnFileMove.enabled": "prompt",

  // Put pasted or dropped images in a folder next to the document
  "markdown.copyFiles.destination": {
    "**/*.md": "images/${documentBaseName}/"
  },

  // Keep trailing double spaces (hard line breaks) in Markdown files
  "[markdown]": {
    "files.trimTrailingWhitespace": false
  }
}

Extensions worth installing

Install by ID: open the Extensions view (Ctrl+Shift+X) and paste the ID, or run code --install-extension <id>. IDs and publishers were checked on the Visual Studio Marketplace.

Using a VS Code version older than 1.121? Add bierner.markdown-mermaid for Mermaid diagrams.

Markdown preview not working? Troubleshooting

Frequently asked questions

Sources

• VS Code docs — Markdown and Visual Studio Code — preview, locking, sync, math, Mermaid, link validation, security
• VS Code 1.141 source — markdown-language-features/package.json — default keybindings, commands, and setting defaults
• VS Code 1.141 source — markdown-math/package.json — markdown.math settings
• VS Code 1.141 source — mermaid-markdown-features — built-in Mermaid support (first present in 1.121.0)
• Visual Studio Marketplace — extension IDs and publishers
• Markdown Preview Github Styling — README — theme settings
• Visual Studio Magazine — Antigravity, Cursor and Windsurf compared — these editors are VS Code forks