MagicMD
Custom Markdown preview for VS Code and Trae with TOC navigation, Mermaid rendering, source mode editing, local file link navigation, jump-to-line support, and reading position restore.
Preview
Preview image placeholder
Add a Marketplace-ready screenshot or GIF here, for example:
Quick Start
- Open any Markdown file.
- Run
MagicMD: Open Preview.
- Use the built-in TOC to navigate headings.
- Switch to source mode when you want to edit Markdown inline.
- Click local file links to open files or jump to specific lines.
Keywords: markdown preview, md preview, custom markdown editor, custom editor, TOC, table of contents, mermaid, diagram, source mode, file link navigation, jump to line, reading position restore.
Highlights
- Custom Markdown preview powered by WebView
- Built-in table of contents with active section tracking
- Mermaid diagram rendering inside preview
- Source mode for inline Markdown editing
- Local file link navigation with jump-to-line support
- Reading position restore when reopening documents
- Link opening from the Markdown source editor
- Image zoom, fullscreen viewing, and scrollable media preview
Why MagicMD
MagicMD is designed for people who read and navigate Markdown like documentation, technical notes, design docs, and project specs every day.
Compared with a basic preview flow, MagicMD adds:
- Faster movement across long documents with a collapsible TOC
- Better cross-file navigation for local Markdown and source links
- Mermaid support for diagrams in the same reading surface
- Source mode when you want to edit Markdown without leaving the preview context
- Better continuity by restoring where you stopped reading
Main Features
Custom Preview
Use the MagicMD: Open Preview command to open a custom Markdown preview panel.
Key capabilities:
- Independent preview experience instead of relying on the default Markdown preview
- GitHub-style reading layout
- Syntax highlighting for common code blocks
- Language labels for code fences
- Mermaid code block rendering
- Integrated TOC and settings drawer
Table of Contents
MagicMD automatically builds a table of contents from headings in the current Markdown file.
It supports:
- Hierarchical heading structure
- Click-to-scroll heading navigation
- Active section highlighting while scrolling
- Automatic TOC refresh after document changes
Local File Link Navigation
MagicMD supports local file links in preview and source workflows.
Supported link patterns include:
- Relative file path:
./docs/guide.md
- Hash line reference:
./src/extension.ts#L20
- Colon line reference:
./src/extension.ts:20
- Query line reference:
./src/extension.ts?line=20
Behavior:
- Opens target files directly from the preview
- Jumps to the requested line when a line reference exists
- Reuses the current preview panel for Markdown-to-Markdown reading when appropriate
Reading Position Restore
MagicMD remembers scroll position per Markdown document.
This helps when:
- Reopening the same document later
- Jumping between multiple Markdown files
- Returning to a document after following local links
Source Mode
MagicMD includes a source mode inside the preview panel for Markdown editing.
Source mode supports:
- Inline Markdown editing
- Save feedback
- Find within source
- Smooth switching between rendered preview and raw Markdown
Open Link Under Cursor
From the Markdown source editor, you can run:
MagicMD: Open Link Under Cursor
When the cursor is on a local file link, MagicMD resolves the target and opens the file, including line navigation when provided.
Typical Use Cases
- Read long Markdown documents with a persistent TOC
- Navigate technical docs that reference local source files
- Review design notes with Mermaid diagrams
- Jump from Markdown specs into implementation files
- Resume reading exactly where you left off
- Edit Markdown in source mode while keeping the same preview workflow
Commands
MagicMD: Open PreviewMagicMD: Open Link Under Cursor
Best For
- Technical documentation
- Engineering notes
- Design documents
- Markdown-heavy repositories
- Mermaid-based documentation workflows
