Markdown in VS Code: Editing, Previewing, and Extensions

VS Code has first-class markdown support built in. You get syntax highlighting, a live preview, an outline view, and IntelliSense for links and images without installing anything. Extensions add linting, table formatting, paste-as-markdown, and direct publishing.

Built-In Features

Live Preview

Open any .md file and press Ctrl+Shift+V (Windows/Linux) or Cmd+Shift+V (macOS) to open the preview in a new tab.

For side-by-side editing: press Ctrl+K V (Cmd+K V on macOS). This splits the editor with the preview on the right. The preview scrolls in sync with the editor.

The preview renders GFM: headings, bold, italic, code blocks with syntax highlighting, tables, task lists, and strikethrough all display correctly.

Outline View

The Explorer sidebar includes an Outline panel that shows all headings in the current document as a collapsible tree. Click a heading to jump to that section. This is useful for navigating long documents.

IntelliSense for Links

When you type [text](, VS Code shows autocomplete suggestions for:

• Files in the workspace (for relative links)
• Headings in the current file (for anchor links)
• Images in the workspace

Type # inside the parentheses to filter by heading.

Drag-and-Drop Images

Drag an image file from the Explorer or your filesystem into a markdown file. VS Code inserts the image syntax with the correct relative path:

![alt text](./images/screenshot.png)

You can also paste images from the clipboard. VS Code saves the image to the workspace and inserts the reference.

Snippets

VS Code includes built-in markdown snippets:

Type the trigger word and press Tab to expand.

Keyboard Shortcuts

Bold and italic toggle shortcuts work natively: select text and press the shortcut to wrap or unwrap the markers.

Recommended Extensions

Markdown All in One

The most popular markdown extension. Adds:

• TOC generation (insert and auto-update)
• List continuation (press Enter to continue a list)
• Keyboard shortcuts for all formatting
• Section numbering
• Print to HTML

markdownlint

Enforces markdown style rules. Catches common issues:

• Missing blank lines before headings
• Inconsistent list markers
• Multiple H1 headings
• Trailing spaces
• Long lines

Configure rules in .markdownlint.json at the project root.

MDtoLink Extension

Publish any markdown file to a shareable URL without leaving VS Code:

1. Open a .md file
2. Open the command palette (Ctrl+Shift+P)
3. Run “MDtoLink: Publish File”
4. Get a shareable URL

The extension connects to your MDtoLink account and publishes the active file. See the VS Code integration guide for setup instructions.

Settings for Markdown

Useful VS Code settings for markdown editing (add to settings.json):

{
  "markdown.preview.fontSize": 14,
  "markdown.preview.lineHeight": 1.6,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "files.associations": {
    "*.mdx": "markdown"
  }
}

VS Code vs Other Editors for Markdown

VS Code is the best choice if you write both code and markdown. Obsidian is better for personal knowledge management and linked notes. Typora and iA Writer are better for distraction-free writing.

Advanced Workflows

Preview Custom CSS

Customize the preview appearance by adding a CSS file:

1. Create a .vscode/markdown.css file in your workspace
2. Add to settings:

{
  "markdown.styles": [".vscode/markdown.css"]
}

3. Style the preview:

body {
  font-family: "Inter", sans-serif;
  max-width: 720px;
  margin: 0 auto;
}

Workspace Snippets for Templates

Create project-specific snippets for repeated content. In .vscode/markdown.code-snippets:

{
  "Blog Post Frontmatter": {
    "prefix": "frontmatter",
    "body": [
      "---",
      "title: \"$1\"",
      "description: \"$2\"",
      "date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
      "tags: [$3]",
      "---",
      "",
      "$0"
    ]
  }
}

Type frontmatter and press Tab to insert the template with cursor positions.

FAQ

Does VS Code support markdown out of the box?

Yes. VS Code includes syntax highlighting, a live preview (Ctrl+Shift+V), an outline view, IntelliSense for links, and basic formatting shortcuts (bold, italic) without any extensions.

What is the best markdown extension for VS Code?

Markdown All in One is the most popular and covers the most use cases: TOC generation, keyboard shortcuts, list editing, and preview enhancements. For linting, add markdownlint.

Can I export markdown to PDF from VS Code?

Not natively. Use the Markdown Preview Enhanced extension, which adds PDF, HTML, and image export. You can also use Pandoc from the integrated terminal: pandoc file.md -o file.pdf.

How do I publish markdown from VS Code?

Install the MDtoLink extension, open a .md file, and run the “Publish File” command. You get a shareable URL in seconds without leaving the editor.

Try It Out

If you are already in VS Code, create a new .md file and start writing. Use Ctrl+K V for a side-by-side preview. When your document is ready, publish it to a shareable URL with the MDtoLink extension or the web editor.

For the full syntax, see the markdown cheat sheet.