Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Enhanced Markdown PreviewNew to Visual Studio Code? Get it now.
Enhanced Markdown Preview

Enhanced Markdown Preview

wangsanshao

|
1 install
| (0) | Free
A secure Markdown preview with an extensible Mermaid experience.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Enhanced Markdown Preview

A secure, extensible Markdown preview extension for VS Code, with an interactive Mermaid and image experience.

Features

  • Live preview — open the preview in a side editor and it refreshes as you type (configurable delay).
  • Editor title icon — a preview button appears in the top-right of the editor for Markdown files.
  • Mermaid diagrams — full rendering with zoom, pan, reset, and fullscreen controls.
  • Zoomable images — every image (including SVG) can be zoomed, panned, reset, and viewed fullscreen via Ctrl/Cmd + wheel or the toolbar.
  • Bidirectional scroll sync — the preview follows the active editor's visible range (and optionally the reverse).
  • Floating table of contents — a collapsible outline panel that highlights the current section.
  • Scroll position restore — the preview remembers where you were across refreshes.
  • Safe by default — strict Webview CSP, HTML sanitization (DOMPurify), and restricted local resource access.

Commands

Command Description
Enhanced Markdown Preview: Open Preview Open the preview in the side editor
Enhanced Markdown Preview: Open Preview to Side Open the preview to the side
Enhanced Markdown Preview: Refresh Preview Force-refresh the preview

Configuration

Setting Default Description
enhancedMarkdownPreview.updateDelay 200 Delay (ms) before refreshing the preview after an edit.
enhancedMarkdownPreview.openRemoteImages false Allow HTTPS images in the preview.
enhancedMarkdownPreview.scrollSync true Scroll the preview to follow the active editor's visible range.
enhancedMarkdownPreview.previewScrollSync false Scroll the editor to follow the preview when the preview is scrolled.

Development

npm install
npm run check        # type check
npm run build        # bundle extension + webview + css
npm run test:unit    # unit + webview (jsdom) tests
npm run test:integration  # Electron integration tests (downloads VS Code on first run)

npm test runs the full pipeline: check, build, unit tests, and integration tests.

Building the extension

npm run package

This produces a .vsix file in the project root that can be installed via Extensions: Install from VSIX….

License

MIT

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2026 Microsoft