Free Markdown View
🚀 A powerful VS Code Markdown preview extension with Mermaid diagram support, math formulas, HTML syntax, image support, and PDF export.
✨ Features
- 📝 Markdown Rendering: Supports CommonMark and GFM extended syntax
- 📊 Mermaid Diagrams: Supports all 23 diagram types (v11.12.2)
- 🔢 Math Formulas: Supports LaTeX math formulas (inline and block)
- 🌐 HTML Syntax: Safe HTML tag support
- 🖼️ Image Support: Supports multiple image formats (PNG, JPG, SVG, GIF, WebP) with flexible size control
- Multiple ways to set image size:
markdown-it-imsize syntax (=widthxheight), markdown-it-attrs syntax ({width=300 height=200}), or HTML tags
- Support for custom attributes: Use
markdown-it-attrs to add class, id, style, and other attributes to any Markdown element
- 📄 PDF Export: Export Markdown to PDF with intelligent sizing
- ⌨️ Keyboard Shortcuts:
Ctrl+Shift+M to toggle preview
🚀 Quick Start
- Install: Search "Free Markdown View" in VS Code Extensions
- Open: Open a Markdown file
- Toggle Preview: Press
Ctrl+Shift+M (Windows/Linux) or Cmd+Shift+M (macOS)
- Export PDF: Use
Ctrl+Shift+E to export as PDF
⌨️ Keyboard Shortcuts
Ctrl+Shift+M (Windows/Linux) or Cmd+Shift+M (macOS): Toggle preview (open/close preview panel)Ctrl+Shift+V (Windows/Linux) or Cmd+Shift+V (macOS): Open preview to the sideCtrl+Shift+E (Windows/Linux) or Cmd+Shift+E (macOS): Export to PDF
Tip: If shortcuts don't work, you can use the Command Palette (Ctrl+Shift+P or Cmd+Shift+P) to search for:
- "Toggle Preview" - Toggle preview
- "Open Preview to the Side" - Open preview to the side
- "Export to PDF" - Export to PDF
📊 Supported Mermaid Diagram Types
Basic Diagrams
- Flowchart
- Sequence Diagram
- Class Diagram
- State Diagram
- Entity Relationship Diagram
- User Journey
- Gantt
- Pie Chart
- Quadrant Chart
- Requirement Diagram
- GitGraph
- C4 Diagram
- Mindmaps
- Timeline
- ZenUML
New Feature Diagrams 🔥
- Sankey
- XY Chart
- Block Diagram
- Packet
- Kanban
- Architecture (with icon support: logos, mdi, carbon, fa)
- Radar
- Treemap
Note: Architecture diagrams support icon packs (logos, mdi, carbon, fa). Icons are displayed correctly in both preview and PDF export modes.
Supports LaTeX math formulas:
- Inline:
$E = mc^2$ or \(x^2 + y^2 = z^2\)
- Block:
$$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$ or \[...\]
🖼️ Image Size Control
Multiple ways to set image size:
markdown-it-imsize syntax:
- Set both width and height:
=300x200
- Set width only:
=300x
- Set height only:
=x200
markdown-it-attrs syntax:
{width=300 height=200}
{.custom-class #id style="width: 300px;"}
HTML tags:
<img src="https://gitee.com/fanzhiyu/free-markdown-view/image.png" width="300" height="200">
🎨 Custom Attributes
Use markdown-it-attrs to add custom attributes to any Markdown element:
- Text:
**Bold text**{.highlight style="color: red;"}
- Links:
[Link](https://example.com){.external target="_blank"}
- Images:
{.rounded style="border-radius: 8px;"}
- Headings:
### Title {#custom-id .custom-class}
- Code blocks:
`code`{.code-inline}
🏗️ Architecture
The extension follows a modular architecture with a service layer for shared functionality:
For detailed architecture documentation, see docs/架构设计.md.
🛠️ Development
# Install dependencies
npm install
# Compile
npm run compile
# Watch mode
npm run watch
# Run tests
npm test
# PDF export test (check Mermaid diagram sizing and blank spaces)
npm run test:pdf
# PDF export test (auto continuous testing)
npm run test:pdf:watch
📦 Packaging
Package Release Version
# Method 1: Use npm script (recommended, auto-compile)
npm run package:prepublish
# Method 2: Use vsce directly (need to compile first)
npm run compile
npm run package
After packaging, a .vsix file will be generated in the project root directory with the format: free-markdown-view-0.1.0.vsix
Install Packaged Extension
- In VS Code, press
Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS)
- Type
Extensions: Install from VSIX...
- Select the generated
.vsix file
Publish to VS Code Marketplace
To publish to the VS Code Marketplace, you need:
Install vsce (if not installed):
npm install -g @vscode/vsce
Create a publisher account (if you don't have one):
Update the publisher field in package.json to your Publisher ID
Get a Personal Access Token:
Publish the extension:
vsce publish
📄 PDF Export
Features
- ✅ Smart Size Control: Mermaid diagrams maintain original size, only scale proportionally when width or height exceeds page limits
- ✅ WYSIWYG: PDF export matches preview mode display
- ✅ Page Break Optimization: Large diagrams can span pages, avoiding blank pages
- ✅ Theme Support: Supports light and dark theme export
- ✅ Icon Support: Architecture diagram icons (logos, mdi, carbon, fa) are correctly displayed in PDF exports
Size Control Rules
- Small Diagrams: Maintain original size, not forced to stretch
- Large Diagrams: If width exceeds 750px or height exceeds 1000px, scale proportionally maintaining aspect ratio
- Extra Large Diagrams: When width exceeds 1500px, limit to container width
Testing
Run npm run test:pdf to automatically test PDF export functionality, checking:
- Whether Mermaid diagram sizes meet expectations
- Whether there are abnormal blank areas
- Whether PDF files are generated normally
📋 Requirements
- VS Code 1.57.0+
- Node.js (included in VS Code)
🐛 Known Issues
No known issues at the moment. If you encounter any problems, please report them in Issues.
📦 Release Notes
See CHANGELOG.md for version history.
📝 License
MIT License - see LICENSE file.
🤝 Contributing
Contributions welcome! Please submit Issues and Pull Requests.
🌐 Language Versions
Happy Markdown editing! 🎉
