VS Code Markdown Editor with Vditor
A powerful VS Code extension for editing Markdown files using Vditor - a modern WYSIWYG Markdown editor.
Features
Editor Modes
- IR Mode (Instant Rendering) - Typora-like editing experience with real-time preview
- WYSIWYG Mode - Rich text editing
- Split View Mode - Side-by-side editing with source view
Rich Content Support
- Mermaid Diagrams - Flowcharts, sequence diagrams, gantt charts, etc.
- Wavedrom - Digital timing diagrams
- KaTeX - Mathematical formulas and equations
- Code Blocks - Syntax highlighting for 100+ languages
- Tables - Easy table creation and editing
- Task Lists - Checkbox support with interactive toggling
- Images - Drag & drop, paste from clipboard, local file support
PDF Export
- Export Markdown to PDF with full rendering
- Mermaid/Wavedrom diagrams exported as SVG
- Embedded fonts (Nunito Sans with Vietnamese support)
- Local images converted to base64
- Code syntax highlighting preserved
- Page numbers in footer
Theming
- Light and Dark theme toggle
- Follows VS Code theme preference
- Persistent theme selection
| Button |
Function |
| Headings |
H1-H6 heading levels |
| Bold/Italic/Strike |
Text formatting |
| Line/Quote |
Horizontal rule, blockquote |
| List/Ordered/Check |
List types |
| Code/Inline Code |
Code blocks |
| Link/Image/Table |
Insert elements |
| Undo/Redo |
History navigation |
| Split View |
Toggle split/fullscreen |
| Outline |
Document outline panel |
| Theme |
Light/Dark toggle |
| Export PDF |
Export to PDF |
Keyboard Shortcuts
Cmd/Ctrl + S - Save documentCmd/Ctrl + Z - UndoCmd/Ctrl + Shift + Z - RedoCmd/Ctrl + B - BoldCmd/Ctrl + I - Italic
Installation
- Open VS Code
- Go to Extensions (
Cmd/Ctrl + Shift + X)
- Search for "Vditor Markdown Editor"
- Click Install
Usage
- Open any
.md file
- Right-click and select "Open with Vditor" or use command palette
- Start editing with the rich toolbar
Export to PDF
- Click the PDF icon in the toolbar
- PDF will be saved in the same directory as the Markdown file
- All diagrams, images, and formatting will be preserved
Requirements
- VS Code 1.74.0 or higher
- Internet connection not required (fonts bundled locally)
Extension Settings
This extension contributes the following settings:
vditorMarkdown.defaultMode: Default editor mode (ir, wysiwyg, sv)
Known Issues
- Large documents may take a moment to render complex diagrams
- Some advanced Mermaid features may require specific syntax
Release Notes
0.0.1
Initial release:
- Vditor integration with IR mode
- PDF export with embedded fonts
- Mermaid/Wavedrom diagram support
- Light/Dark theme toggle
- Local image support
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
License
MIT
Credits
| |
