Markdown Preview Pro
title Markdown Preview Pro
subtitle Clean, minimal markdown preview for VS Code with syntax highlighting, Mermaid, KaTeX, export, and interactive features
publisher luongnv89
license MIT
repository https://github.com/luongnv89/vscode-markdown-preview
marketplace https://marketplace.visualstudio.com/items?itemName=luongnv89.markdown-preview-pro
docs https://github.com/luongnv89/vscode-markdown-preview/blob/main/docs/USER_GUIDE.md
version 0.9.0
highlights Syntax highlighting Mermaid diagrams KaTeX math Interactive task lists HTML/PDF export Scroll sync

Markdown Preview Pro

A clean, minimal markdown preview for Visual Studio Code — built for developers who spend real time in their editor and care about how code blocks, diagrams, math, tables, and long technical docs actually render.

Note: This page is the exact output of generating a single Markdown file into a single standalone HTML file using this extension’s own rendering/export pipeline.

Install from Marketplace · View on GitHub · Read the User Guide

Markdown Preview Pro screenshot

See the output first

If your main question is “what does this look like inside a developer workflow?”, this is the part that matters first:

That is why the rendering showcase comes before installation.

Rendering showcase

This section intentionally demonstrates the different markdown elements and rich content types the extension renders.

TypeScript code block

interface PreviewConfig {
  scrollSync: boolean;
  enableMermaid: boolean;
  enableKatex: boolean;
  enableCheckboxes: boolean;
}

const config: PreviewConfig = {
  scrollSync: true,
  enableMermaid: true,
  enableKatex: true,
  enableCheckboxes: true,
};

console.log('Preview ready', config);

Python code block

def render_markdown(name: str, features: list[str]) -> str:
    joined = ", ".join(features)
    return f"{name} supports: {joined}"

print(render_markdown("Markdown Preview Pro", ["Mermaid", "KaTeX", "HTML export"]))

JSON code block

{
  "name": "markdown-preview-pro",
  "publisher": "luongnv89",
  "features": ["preview", "mermaid", "math", "export"]
}

Mermaid diagram

graph TD
  A[Markdown source] --> B[Markdown engine]
  B --> C[Preview HTML]
  C --> D[Live webview]
  D --> E[Export to HTML/PDF]

KaTeX math

Inline math looks like this: E = mc^2

Block math:

\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}

Text styles

This is regular text with bold, italic, bold italic, strikethrough, and inline code.

You can also render links like GitHub and mix inline formatting with normal prose.

Ordered and unordered lists

  1. Open a markdown file
  2. Launch preview to the side
  3. Edit while watching the preview update
  4. Export if you need a shareable artifact

Interactive task lists

Blockquotes

Good preview tooling should disappear into the background and let the content do the work.

Nested note: this renderer also handles nested blockquote structure.

Yep, including this part.

Table rendering

Element Why it matters
Headings Clear hierarchy
Code blocks Technical readability
Tables Compact structure
Quotes Visual separation
Lists Scannability

Horizontal rule

Images

Extension icon

Keyboard keys and inline HTML

Press Ctrl+Shift+V to open preview to the side.

Click to expand an HTML details block

This content is inside a native HTML disclosure block, rendered as part of the markdown preview.

Why this extension exists

VS Code already has a markdown preview, but developers often want something sharper:

Markdown Preview Pro is built around that idea.

Core features

Feature What it does
Syntax highlighting Renders fenced code blocks with highlighted syntax and readable styling
Mermaid diagrams Supports flowcharts, sequence diagrams, and other Mermaid blocks
KaTeX math Renders inline and block math formulas
Interactive task lists Lets task lists behave like real checkboxes inside preview
Export to HTML Generates a standalone HTML document
Export to PDF Exports using Chrome / Chromium
Frontmatter card Parses YAML frontmatter into a styled metadata card
Image support Handles local images and common markdown image flows

Commands

Command Description
Markdown Preview Pro: Open Preview Open preview in the current pane
Markdown Preview Pro: Open Preview to Side Open preview beside the editor
Markdown Preview Pro: Export to HTML Export a standalone HTML file
Markdown Preview Pro: Export to PDF Export to PDF

Configuration snapshot

Setting Default Description
markdownPreviewPro.scrollSync true Bidirectional scroll synchronization
markdownPreviewPro.enableMermaid true Enable Mermaid rendering
markdownPreviewPro.enableKatex true Enable math rendering
markdownPreviewPro.enableCheckboxes true Enable interactive checkboxes
markdownPreviewPro.typographer true Enable smart typography
markdownPreviewPro.lineBreaks false Convert new lines to <br>
markdownPreviewPro.showFrontmatter card Show YAML frontmatter as a styled card

Installation

From VS Code Marketplace

Search for Markdown Preview Pro in the Extensions view and click Install.

From CLI

code --install-extension luongnv89.markdown-preview-pro

Requirements

Open source

If you want a markdown preview that feels more polished without turning into a kitchen-sink monster, this extension is built for exactly that.

Install Markdown Preview Pro