MarkdownPreview.net
Back to Guides
Developer Workflow Guide

How to Preview Markdown in VS Code — Shortcuts, Settings & Extensions

Visual Studio Code provides high-performance native Markdown editing, but configuring synced scrolling, GitHub-accurate typography, Mermaid diagrams, and LaTeX math requires knowing the right keybindings and settings. Here is your definitive reference.

7 min read 5 shortcuts · 4 extensions · 6 settings
Quick Shortcut: Press Ctrl+K then V (or ⌘+K V on Mac) to open a side-by-side synchronized preview immediately.

1. Essential Keyboard Shortcuts

Save time without clicking menus. Memorize these five primary shortcuts for navigating preview mode:

ActionWindows / LinuxmacOS
Open Preview to the Side (Split View)Primary
Ctrl + K V⌘ + K V
Open Preview in Active Tab
Ctrl + Shift + V⇧ + ⌘ + V
Switch from Preview Back to Source Code
Ctrl + Shift + V⇧ + ⌘ + V
Lock Preview to Current File
Markdown: Toggle Preview LockingMarkdown: Toggle Preview Locking
Jump to Source from Preview ElementPrimary
Double-Click elementDouble-Click element

2. Recommended settings.json Configuration

Fine-tune how VS Code syncs scrolling, handles link clicks, and formats line breaks. Open your Command Palette (Ctrl+Shift+P / ⌘+Shift+P), select Preferences: Open User Settings (JSON), and paste these optimal defaults:

// Recommended VS Code Markdown Preview Settings
{
  "markdown.preview.scrollEditorWithPreview": true,
  "markdown.preview.scrollPreviewWithEditor": true,
  "markdown.preview.breaks": true,
  "markdown.preview.linkify": true,
  "markdown.preview.fontSize": 15,
  "markdown.preview.lineHeight": 1.6,
  "markdown.preview.doubleClickToSwitchToEditor": true
}
markdown.preview.scrollEditorWithPreview
When you scroll the preview pane, automatically scroll the editor to match position.
Default: true
markdown.preview.scrollPreviewWithEditor
When you scroll the editor, automatically scroll the preview pane to match.
Default: true
markdown.preview.breaks
Sets whether soft line breaks in paragraphs render as <br>. Set to true for GitHub-style line breaking.
Default: false
markdown.preview.linkify
Automatically turns raw URL strings into clickable hyperlinks in the preview pane.
Default: true
markdown.preview.fontSize
Customizes base text size (in pixels) for fonts rendered within the preview.
Default: 14
markdown.preview.doubleClickToSwitchToEditor
Double-clicking any element in preview reveals and positions cursor at source code line.
Default: true

3. Top 4 VS Code Extensions for Markdown

Out-of-the-box VS Code doesn't support Mermaid diagrams, LaTeX math equations, or export to PDF. These verified extensions supercharge your writing setup:

Markdown Preview Enhanced

by Yihua Yen · 4.8 ★ (1.8M+ installs)
Math & KaTeXMermaid DiagramsPDF ExportPresentation Mode

The ultimate all-in-one preview replacement. Includes KaTeX/MathJax for math, Mermaid, PlantUML, Chart.js, PDF/HTML export, and presentation slide deck mode.

ext install shd101wyy.markdown-preview-enhanced

Markdown Preview Mermaid Support

by Matt Bierner (VS Code Team) · 4.7 ★ (1.2M+ installs)
FlowchartsSequence DiagramsZero Config

Adds native rendering for ```mermaid code blocks inside the default built-in VS Code preview window without changing any existing settings.

ext install bierner.markdown-mermaid

Markdown Preview Github Styling

by Matt Bierner · 4.6 ★ (800K+ installs)
GitHub Look & FeelGFM TypographyTable Styling

Restyles the default VS Code preview with official GitHub CSS stylesheets, fonts, colors, and table designs so your local preview matches github.com pixel for pixel.

ext install bierner.markdown-preview-github-styles

Markdown All in One

by Yu Zhang · 4.9 ★ (6.5M+ installs)
Auto Table of ContentsList ContinuationKeybindings

Productivity powerhouse: automated Table of Contents generation, list completion, math formulas, keyboard shortcuts for bold/italic/links, and quick formatting.

ext install yzhang.markdown-all-in-one

4. Troubleshooting Common VS Code Preview Issues

If your preview isn't rendering properly, check these four common culprits and solutions:

!Preview pane is blank or stuck on loading spinner
Why it happens: Corrupted Webview process or conflicting extension cache in VS Code.
Fix: Press Ctrl+Shift+P (Cmd+Shift+P on Mac) → type "Developer: Reload Window" and press Enter. If that fails, test with "Help: Start Extension Bisect" to isolate any faulty markdown extensions.
!Images with relative paths show broken icon
Why it happens: VS Code security policy restrictively blocks file path access outside active workspace root.
Fix: Ensure the image resides inside your opened project folder. If needed, click the small lock/shield icon in preview header and choose "Disable security restrictions" for local development.
!Mermaid code blocks only show raw text, not diagrams
Why it happens: VS Code's default preview engine does not bundle Mermaid.js out of the box.
Fix: Install the official "Markdown Preview Mermaid Support" extension by Matt Bierner, or use MarkdownPreview.net in browser for instant zero-install diagram rendering.
!LaTeX math formulas ($...$ or $$...$$) do not render
Why it happens: Standard CommonMark specification does not define math syntax.
Fix: Install "Markdown Preview Enhanced" extension or use our online KaTeX LaTeX Markdown Preview tool.

When to Use VS Code vs. Online Markdown Preview

Best in VS Code

  • Editing extensive multi-file repositories with Git source control
  • Integrated terminal and custom build pipelines (e.g. Nextra, Docusaurus)
  • Offline editing of local repository files

Best on MarkdownPreview.net

  • Zero-install instant preview on any machine or mobile device
  • Built-in Mermaid & KaTeX rendering without installing extensions
  • Generate shareable links and clean HTML with a single click

Frequently Asked Questions

Need a quick preview without opening VS Code?
Paste Markdown, Mermaid diagrams, or math equations directly in our browser editor.
Open Browser Previewer

Explore More Markdown Tools

All tools are free, client-side, and require no account.

Live Markdown PreviewerPopular

Full CommonMark editor with real-time HTML preview, Mermaid, KaTeX, and one-click export.

Try it
GitHub Markdown PreviewGFM

Test GitHub READMEs, GFM alerts, task lists, and tables exactly as GitHub renders them.

Try it
Mermaid Diagram PreviewNew

Live flowcharts, sequence diagrams, class diagrams, Git graphs, and Gantt charts.

Try it
LaTeX / KaTeX Math PreviewKaTeX

Inline and block KaTeX equations, matrices, integrals, and aligned math — zero lag.

Try it
Markdown GuidesLearn

Practical tutorials: VS Code preview, GitHub rendering issues, browser workflows, and more.

Try it