Preview multiple Markdown files simultaneously with independent preview panels. Each file gets its own preview tab — no more losing your place when switching between documents.
Features
Independent Preview Panels — Each Markdown file opens in its own preview tab. Work with multiple documents side by side without interference.
Auto Preview — Automatically opens a preview panel when you open a .md or .markdown file. Can be disabled via settings.
Real-time Update — Preview updates as you type with debounced rendering (300ms).
Bidirectional Scroll Sync — Editor and preview scroll positions stay in sync in both directions.
Mermaid Diagrams — Renders mermaid code blocks as diagrams with pan/zoom controls. Theme follows your VS Code color theme.
Syntax Highlighting — Code blocks are highlighted with highlight.js and include a copy-to-clipboard button on hover.
Outline Sidebar — Collapsible sidebar showing document headings for quick navigation. Click a heading to scroll to it. Depth level is configurable.
Color Swatch Decorator — Displays inline color swatches next to color codes (Hex, RGB/RGBA, HSL/HSLA) in both code blocks and body text.
Frontmatter Display — YAML frontmatter is rendered as a labeled code block at the top of the preview.
Task List Support — - [x] and - [ ] items render as styled checkboxes.
Heading Prefix Display — Shows # / ## / ### prefixes in a subtle gray style alongside heading text.
Image Support — Relative image paths are resolved correctly within the webview. Remote images can be toggled via settings.
Theme Integration — Fully follows VS Code's Light, Dark, and High Contrast themes.
Usage
Auto Preview
When mdMultiTabPreview.autoPreview is enabled (default), opening any .md file automatically shows its preview in a side panel.