Mditor
English | 简体中文 | 繁體中文 | 日本語 | 한국어 | Français | Deutsch | Español | Русский
A powerful and elegant VS Code extension that transforms your Markdown editing experience with WYSIWYG capabilities and comprehensive file preview support.
✨ Highlights
Mditor brings professional-grade editing and preview capabilities to Visual Studio Code, featuring:
- 🎨 Beautiful WYSIWYG Markdown Editor - Real-time preview with rich formatting
- 📊 Multi-format File Viewer - Preview Office documents, PDFs, and more
- 🌓 Multiple Theme Support - Gorgeous light and dark themes for comfortable editing
- ⚡ Lightning Fast - Optimized performance for large documents
- 🎯 Developer Friendly - Rich keyboard shortcuts and intuitive interface
📸 Screenshots
Light Theme
Dark Theme
🚀 Features
Markdown Editor Excellence
Powered by Vditor, our WYSIWYG editor provides:
- Real-time Preview - See your formatted content as you type
- Rich Formatting - Support for tables, code blocks, diagrams (Mermaid), math formulas (LaTeX)
- Smart Paste - Automatic image upload and path resolution
- Export Anywhere - Convert to PDF, DOCX, or HTML with one click
- Theme Variety - Multiple beautiful editor themes to match your style
Powerful Keyboard Shortcuts
Built on Vditor shortcuts with enhanced productivity features:
- Move list up:
Ctrl+Alt+I / ⌘+^+I
- Move list down:
Ctrl+Alt+J / ⌘+^+J
- Edit in VS Code:
Ctrl+Alt+E / ⌘+^+E
- Enhanced paste:
Ctrl+V / Cmd+V with automatic image handling
Smart Features
- Zoom editor with
Ctrl/Cmd + Mouse Wheel
- Open hyperlinks with
Ctrl/Meta + Click or double-click
- Drag & drop image insertion
- Automatic image path resolution
- Syntax highlighting with multiple theme options
Comprehensive File Preview
Preview common file formats directly in VS Code:
- 📊 Spreadsheets: .xls, .xlsx, .csv (with edit & save capability)
- 📝 Documents: .docx
- 🖼️ Graphics: .svg
- 📄 PDFs: .pdf (powered by PDF.js)
- 🔤 Fonts: .ttf, .otf, .woff, .woff2
- 📋 Markdown: .md, .markdown
- 🌐 HTTP: .http, .rest (integrated HTTP client)
- ⚙️ Registry: .reg (Windows registry files)
- 📦 Archives: .zip, .jar, .vsix, .rar
Additional Capabilities
- Material Icons - Beautiful file icons from Material Icon Theme
- Live HTML Preview - Press
Ctrl+Shift+V for instant HTML preview
- HTTP Client - Send API requests directly from .http files
- Registry Editor - Syntax highlighting for Windows registry files
🔧 Configuration
Fine-tune Mditor through VS Code settings:
| Setting |
Description |
mditor.enabled |
Enable/disable the extension |
mditor.previewCode |
Enable code syntax highlighting in preview |
mditor.previewCodeStyle |
Default syntax highlighting style |
mditor.previewCodeHighlight.showLineNumber |
Show line numbers in code blocks |
mditor.editorLanguage |
Editor UI language |
mditor.workspacePathAsImageBasePath |
Use workspace path for image base path |
mditor.pasterImgPath |
Image paste path template |
mditor.chromiumPath |
Chromium path for PDF export |
Switching to Native Markdown Editor
To use VS Code's default markdown editor, add to settings.json:
{
"workbench.editorAssociations": {
"*.md": "default",
"*.markdown": "default"
}
}
📋 Requirements
- Visual Studio Code
^1.64.0
- Internet connection (for some preview features)
📥 Installation
From Marketplace
- Open VS Code
- Go to Extensions (
Ctrl+Shift+X)
- Search for "Mditor"
- Click Install
From VSIX
- Download the latest .vsix file
- Open VS Code
- Extensions →
... → Install from VSIX
- Select the downloaded file
🎯 Quick Start
- Markdown Editing: Open any
.md file - the WYSIWYG editor launches automatically
- Office Preview: Click on
.xlsx, .docx, .pdf files to preview
- HTML Preview: Open
.html files and press Ctrl+Shift+V
- HTTP Requests: Create
.http files to test APIs
- Archive Viewing: Open
.zip or other archives to browse contents
📖 Markdown Examples
Want to see what Mditor can do? Check out our comprehensive Markdown examples file that showcases all supported features:
Download markdown-examples.md
This example file includes:
- Basic text formatting (headings, bold, italic, lists)
- Code blocks with syntax highlighting (C++, Java, Python, Shell, CMake, Log files)
- Mermaid diagrams (flowcharts, sequence diagrams, class diagrams, Gantt charts, Git graphs)
- Mathematical formulas (LaTeX)
- Tables and data visualization
- Music notation (ABC notation)
- Graphviz diagrams
- ECharts data visualization
- And much more!
🛠️ Development
# Install dependencies
npm install
# Build the extension
npm run build
# Development mode with hot reload
npm run dev
# Package for distribution
npm run package
💖 Support This Project
If you find Mditor helpful, consider supporting its development:
International Donations
PayPal: howpigcanfly@outlook.com
China Mainland Donations
Alipay / WeChat Pay: Scan the QR codes above
Bank Transfer (China)
For bank transfer donations, please contact: dreamxwork@outlook.com
Your donations help maintain and improve this project. Thank you for your support!
🙏 Credits
This project is built on the shoulders of giants:
📜 License
This project is licensed under the LGPL-3.0-or-later License.
Made with ❤️ by the Mditor Team | Last updated: 2026
