Markdown Preview Advance
中文说明
Markdown Preview Advance enhances VS Code's built-in Markdown Preview through official Markdown contribution hooks. It does not replace VS Code's Markdown Preview renderer or maintain a separate preview implementation.
Use it when you want the native VS Code Markdown Preview experience with a floating outline, Mermaid diagrams, math formulas, and code block titles.
Features
- Floating TOC: automatically scans
h1 to h6 headings and shows a Notion-like floating outline on the right side of the preview.
- Current section highlight: highlights the active heading while you scroll.
- Collapsed and expanded modes: shows compact markers by default and expands the full outline on hover or keyboard focus.
- Slide-in animation: the expanded TOC panel slides in from the right and fades in quickly.
- Long outline support: the TOC panel is height-limited and scrollable for large documents.
- Relative heading indentation: nested headings are indented based on the document's actual heading hierarchy.
- Mermaid diagrams: renders
mermaid fenced code blocks.
- Math formulas: renders inline and block math with KaTeX.
- Code block titles: displays a title bar above fenced code blocks that use
title="..." in the info string.
Design
Markdown Preview Advance only extends VS Code's native Markdown Preview:
- Uses
markdown.markdownItPlugins to extend the Markdown-it rendering pipeline.
- Uses
markdown.previewScripts to add preview-side behavior.
- Uses
markdown.previewStyles to add preview-side styles.
- Does not replace VS Code's Markdown Preview.
- Does not implement code syntax highlighting; code highlighting remains VS Code's native Markdown Preview behavior.
Usage
Install the extension, open a Markdown file, then run one of VS Code's built-in preview commands:
Markdown: Open PreviewMarkdown: Open Preview to the Side
The extension does not add a separate preview command. It activates automatically in VS Code's native Markdown Preview.
Floating TOC
The TOC is generated from preview headings automatically. No additional Markdown syntax is required.
# Install Claude Code and Configure Kimi Model
## 1. Install Homebrew
## 2. Install Claude Code
## 3. Log in
## 4. Verify the setup
Preview behavior:
- Shows compact markers on the right side by default.
- Expands the full outline when the pointer enters the TOC area.
- Collapses automatically when the pointer leaves the TOC area.
- Jumps to the selected heading when a TOC item is clicked.
- Highlights the current reading position.
- Indents nested headings by level.
Mermaid
Use a standard mermaid fenced code block.
```mermaid
graph TD
A[Start] --> B{Ready?}
B -->|Yes| C[Done]
B -->|No| D[Retry]
```
Mermaid blocks also support titles:
```mermaid title="flow.mmd"
sequenceDiagram
participant User
participant VSCode
User->>VSCode: Open Markdown Preview
VSCode-->>User: Render diagram
```
Math
Inline math:
Einstein's mass-energy equivalence is $E = mc^2$.
Block math:
$$
\int_0^1 x^2 dx = \frac{1}{3}
$$
Bracket delimiters are also supported:
\[
E = mc^2
\]
LaTeX display environments are supported too:
\begin{equation}
a^2 + b^2 = c^2
\end{equation}
Code Block Titles
Add a title attribute after the code block language name.
```yaml title="config.yaml"
server:
host: localhost
port: 3000
```
Double quotes, single quotes, and unquoted values without spaces are supported:
```ts title="extension.ts"
console.log('double quoted title');
```
```sql title='query.sql'
select * from users;
```
```json title=package.json
{
"name": "example"
}
```
Keep the language name first, for example yaml title="config.yaml". The extension removes only the title metadata before handing the code block back to VS Code's native Markdown Preview renderer, so the language name is not polluted.
Full Example
# Preview Demo
Inline math: $E = mc^2$.
$$
\sum_{n=1}^{10} n = 55
$$
## Diagram
```mermaid title="workflow.mmd"
graph LR
Write --> Preview
Preview --> Publish
```
## Config
```yaml title="config.yaml"
preview:
toc: true
mermaid: true
math: true
```
### Nested Section
This third-level heading is indented in the floating TOC.
Requirements
Extension Settings
This extension currently contributes no user-facing settings. Install it and open VS Code's native Markdown Preview to use it.
Notes
- Code syntax highlighting is not implemented by this extension; it remains VS Code's native Markdown Preview behavior.
- Mermaid and math rendering run inside the VS Code Markdown Preview Webview using bundled extension dependencies.
- For documents with many headings, the TOC panel is height-limited and scrolls internally.
Development
Install dependencies:
npm install
Run type checks:
npm run check
Build the extension:
npm run build
For local debugging, open this repository in VS Code, start an Extension Development Host, and open Markdown Preview in the new window.
