VS Code Markdown Preview and Extensions Guide

VS Code markdown preview is built into every installation and renders your .md files with live updating as you type. Beyond the default preview, VS Code has a rich extension ecosystem for markdown linting, PDF export, table formatting, and more. This guide covers the built-in features, the best extensions as of 2026, and configuration tips for a productive markdown workflow.

How Do You Preview Markdown in VS Code?

VS Code includes a markdown previewer out of the box. Open any .md file and use one of these methods:

Side-by-side preview: Press Ctrl+K V (Windows/Linux) or Cmd+K V (Mac). This opens the preview panel next to your editor so you can see changes in real time.

Full preview: Press Ctrl+Shift+V (Windows/Linux) or Cmd+Shift+V (Mac). This replaces the editor tab with a full-width preview.

From the command palette: Press Ctrl+Shift+P, type "Markdown: Open Preview," and select the option.

The preview updates automatically as you type. There is no save-and-refresh cycle.

Built-in Markdown Features in VS Code

VS Code's default markdown support includes more than just preview:

Syntax highlighting. Markdown files get color-coded headings, bold, italic, links, code blocks, and other elements in the editor.

Outline view. The sidebar shows a document outline based on your headings (H1 through H6). Click any heading to jump directly to that section.

Link validation. VS Code can warn you about broken links to local files and missing heading anchors. It is off by default; enable it with the markdown.validate.enabled setting.

Path autocomplete. When typing image or link paths, VS Code suggests files and folders from your workspace. Suggestions appear as you type a path inside the parentheses, or press Ctrl+Space to open them.

Folding. Collapse sections by heading level. Click the fold icon next to any heading to hide its content. This works based on the heading hierarchy.

Math and Mermaid. The built-in preview renders KaTeX math between dollar signs (toggle it with markdown.math.enabled) and Mermaid diagrams in mermaid fenced code blocks, with no extension installed.

Drag and drop images. Hold Shift and drag an image file from the Explorer into the markdown editor, and VS Code inserts the markdown image syntax with the correct relative path.

Best VS Code Markdown Extensions in 2026

These are the extensions we recommend:

Markdown All in One

The most popular markdown extension, with over 14 million installs at the time of writing. It adds:

• Keyboard shortcuts for bold (Ctrl+B), italic (Ctrl+I), and strikethrough
• Auto-completion for lists (press Enter to continue a list)
• Table of contents generation (command palette: "Create Table of Contents")
• Table formatting (run Format Document, Alt+Shift+F on Windows/Linux or Shift+Option+F on Mac, to align the columns)

This is the single best extension to install if you want one extension that covers most needs.

markdownlint

A linter that catches common markdown issues. It checks for inconsistent heading levels, trailing spaces, blank lines, and dozens of other rules from the markdownlint library. Each warning includes a rule ID (like MD001, MD013) and a short description, and many rules offer a quick fix.

Configure rules in .markdownlint.json at your project root:

{
  "MD013": false,
  "MD033": false
}

Disable MD013 (line length) if you prefer soft wrapping. Disable MD033 (no inline HTML) if you use HTML tags for image sizing or centering.

Markdown PDF

Exports your markdown files to PDF, HTML, PNG, or JPEG directly from VS Code. Right-click any .md file and select "Markdown PDF: Export (pdf)" to generate a styled PDF in the same directory.

The extension uses a Chromium-based renderer, so the PDF output matches the browser preview closely. You can customize CSS, headers, footers, and margins in settings.

For a no-install alternative, our online markdown to PDF converter handles the same conversion in the browser.

Markdown Preview Enhanced

An alternative preview engine with features the built-in preview lacks: PlantUML diagrams, custom preview CSS, code chunk execution, presentation mode (reveal.js slides), and export to several formats. Use this if the built-in preview does not handle your use case.

Paste Image

Paste screenshots directly from your clipboard into markdown. Press Ctrl+Alt+V and the extension saves the clipboard image to your project folder and inserts the markdown image syntax. This saves time compared to manually saving and linking screenshots.

How to Customize Markdown Preview CSS

You can change how the VS Code preview looks by adding custom CSS. Open settings (Ctrl+,), search for "markdown styles," and add a path to your CSS file:

{
  "markdown.styles": ["./custom-preview.css"]
}

Create custom-preview.css in your workspace:

body {
  font-family: 'Inter', system-ui, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.7;
}

h1 { color: #1a1a2e; }
code { background-color: #f0f0f0; padding: 2px 6px; border-radius: 3px; }
blockquote { border-left: 4px solid #3b82f6; padding-left: 16px; color: #4a5568; }

The custom CSS applies only to the preview panel. Your theme colors in the editor remain unchanged.

VS Code Markdown Snippets and Shortcuts

Here are the most useful keyboard shortcuts for markdown editing in VS Code:

Shortcut	Action	Extension Required
Ctrl+B	Bold selected text	Markdown All in One
Ctrl+I	Italic selected text	Markdown All in One
Ctrl+K V	Side-by-side preview	Built-in
Ctrl+Shift+V	Full preview	Built-in
Alt+Shift+F	Format Document (aligns tables)	Markdown All in One
Ctrl+Shift+]	Increase heading level	Markdown All in One
Ctrl+Shift+[	Decrease heading level	Markdown All in One
Alt+C	Toggle checkbox	Markdown All in One

You can also create custom snippets for frequently used markdown patterns. Open the command palette, select "Snippets: Configure User Snippets," choose markdown.json, and add your templates.

VS Code vs Online Markdown Editors

VS Code is excellent for markdown editing within a local development environment. Online editors like ours offer advantages in different scenarios:

Feature	VS Code	Markdown Editor Online
Installation required	Yes	No (browser-based)
Works offline	Yes	Limited
PDF/DOCX export	Extension needed	Built-in
Real-time preview	Yes	Yes
Collaboration	Via Live Share	No
Math (KaTeX)	Built-in	Built-in
File management	Local file system	In the browser

Use VS Code for long-form documentation, complex projects, and Git-based workflows. Use our online editor for quick conversions, sharing without setup, or when you do not have VS Code installed.

Frequently Asked Questions

Summary

The built-in VS Code markdown preview handles most editing needs with zero configuration. Add Markdown All in One for shortcuts and table formatting, markdownlint for style enforcement, and Markdown PDF for export. Customize the preview CSS to match your documentation style. For quick markdown work without installing anything, try our online markdown editor with built-in PDF, HTML, and DOCX export. See the markdown cheat sheet for the complete syntax reference.

Written by the Markdown Editor Online team. Last updated April 2026.