VS Code Extension

May 26, 2026 · View on GitHub

Markdown Viewer is available as a VS Code extension, allowing you to preview and export Markdown documents directly within your editor.

Overview

Feature	Status
Markdown preview	✅
Word export	✅
All diagram types	✅
LaTeX formulas	✅
29 themes	✅
Live preview	✅

Version: 5.0.0

Installation

From VS Code Marketplace

Visit VS Code Marketplace - Markdown Viewer Extension
Click Install
Or open VS Code, go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
Search for "Markdown Viewer Extension"
Click Install

From Open VSX

For VSCodium or offline installations:

Visit Open VSX - Markdown Viewer Extension
Click Install

From Command Line

code --install-extension xicilion.markdown-viewer-extension

Features

Live Preview

As you edit your Markdown file, the preview updates in real-time.

Open Preview:

Command Palette: Markdown Viewer: Open Markdown Preview to the Side (Advanced)
Keyboard: Ctrl+Shift+V / Cmd+Shift+V
Editor title action: Markdown Viewer

Side-by-Side Editing

Edit and preview simultaneously:

Ctrl+Shift+V / Cmd+Shift+V — Open the Markdown Viewer panel to the side

Export to Word

Export the current document to Word:

Open the preview first, then use the Export menu in the preview title bar
Choose the DOCX export action from the preview UI

Usage

Opening Preview

Open a .md file in VS Code
Click the Markdown Viewer action in the editor title bar
- Or use keyboard shortcut Ctrl+Shift+V

Or run Markdown Viewer: Open Markdown Preview to the Side (Advanced)

Preview opens in a new tab

Exporting

Open the Markdown Viewer preview
Click the Export menu in the preview title bar
Choose the DOCX action
Choose a save location if prompted
The Word document is created

Settings

Access settings: File → Preferences → Settings → Markdown Viewer

Setting	Default	Description
`markdownViewer.theme`	`auto`	Preview theme selection
`markdownViewer.fontSize`	`16`	Base preview font size
`markdownViewer.fontFamily`	`""`	Custom preview font family
`markdownViewer.lineNumbers`	`true`	Show code block line numbers
`markdownViewer.scrollSync`	`true`	Sync editor and preview scrolling
`markdownViewer.deferAsyncRenderUntilFirstPaint`	`false`	Delay async rendering until first paint for heavy docs

settings.json Example

{
  "markdownViewer.theme": "auto",
  "markdownViewer.fontSize": 16,
  "markdownViewer.fontFamily": "Georgia",
  "markdownViewer.lineNumbers": true,
  "markdownViewer.scrollSync": true
}

Diagrams in VS Code

All diagram types work in VS Code:

PlantUML

```plantuml
@startuml
Alice -> Bob: Hello
Bob --> Alice: Hi!
@enduml
```

Mermaid

```mermaid
graph TD
    A[Start] --> B[End]
```

Graphviz

```dot
digraph G {
    A -> B
}
```

Vega-Lite

```vega-lite
{
  "data": {"values": [{"x": 1, "y": 2}]},
  "mark": "point",
  "encoding": {
    "x": {"field": "x"},
    "y": {"field": "y"}
  }
}
```

Keyboard Shortcuts

Action	Windows/Linux	macOS
Open Preview to Side	`Ctrl + Shift + V`	`Cmd + Shift + V`
Export / Settings / Print	Use preview title-bar menus	Use preview title-bar menus

Integration with VS Code

Works With

✅ VS Code built-in Markdown features
✅ Git diff view
✅ Remote workspaces
✅ WSL
✅ GitHub Codespaces

File Types

Extensions	Language ID	Supported
`.md`, `.markdown`, `.slides.md`	`markdown`	✅
`.plantuml`, `.puml`	`plantuml`	✅
`.mermaid`, `.mmd`	`mermaid`	✅
`.vega`, `.vl`, `.vega-lite`	`vega`	✅
`.gv`, `.dot`	`graphviz`	✅
`.infographic`	`infographic`	✅
`.canvas`	`canvas`	✅
`.drawio`	`drawio`	✅

Advantages Over Browser Extension

Aspect	VS Code	Browser
Editing	Native code editing	View only
Live Preview	Real-time as you type	Manual refresh
File Management	Full VS Code features	Browser-based
Git Integration	Built-in	None
Workspace	Multi-file projects	Single file