Markdown Editor & Preview
A powerful Markdown editor and real-time preview tool specifically designed for VS Code, developed by the mdeditor.net team. It supports Mermaid diagrams, mathematical formulas, code highlighting, image uploading, and many other rich features, making it an ideal choice for writing technical documents and notes.
✨ Key Features
📝 Powerful Editing Capabilities
- Real-time Preview - Supports synchronized editing and preview display
- Syntax Highlighting - Complete Markdown syntax support and code highlighting
- Rich Toolbar - Contains commonly used formatting tools and quick operations
- Multi-language Support - Supports both Chinese and English interfaces
- Mermaid Diagrams - Supports various chart types including flowcharts, sequence diagrams, Gantt charts, etc.
- Mathematical Formulas - Complete KaTeX mathematical formula rendering support
- Table Editing - Visual table editing and formatting
🖼️ Image Management
- Drag & Drop Upload - Supports direct drag and drop of images into the editor
- Clipboard Upload - Supports pasting images from clipboard
- Batch Upload - Upload multiple image files at once
- GitHub Image Hosting - Automatically uploads to GitHub repositories and retrieves links
- Progress Feedback - Real-time display of upload progress and status
🔧 Developer Friendly
- VS Code Integration - Perfect integration with VS Code workflow
- Custom Editor - Acts as the default editor for .md files
- API Support - Provides rich programming interfaces
- Highly Extensible - Supports custom configuration and extensions
📦 Installation
Install from VS Code Marketplace
- Open VS Code
- Press
Ctrl+Shift+X to open the Extensions panel
- Search for "Markdown Editor & Preview"
- Click Install
Manual Installation
- Download the
.vsix file
- In VS Code, press
Ctrl+Shift+P
- Type "Extensions: Install from VSIX"
- Select the downloaded file to install
🚀 Usage
Basic Usage
- Open any
.md file in VS Code
- Right-click and select "Open with Markdown Editor & Preview"
- Or right-click on a
.md file in the Explorer and select the same option
Keyboard Shortcuts
Ctrl+S - Save documentCtrl+Z - Undo operationCtrl+Y - Redo operationCtrl+B - Bold textCtrl+I - Italic text
- Text Formatting - Bold, italic, underline, strikethrough, etc.
- Headers - H1-H6 header levels
- Lists - Ordered lists, unordered lists, task lists
- Insert - Links, images, tables, code blocks
- Special - Mermaid diagrams, mathematical formulas
- View - Preview mode, fullscreen mode, table of contents
📖 Feature Details
Mermaid Diagrams
Supports various chart types:
graph TD
A[Start] --> B{Configured?}
B -->|Yes| C[Start Editing]
B -->|No| D[Configure Settings]
D --> C
C --> E[Save Document]
Supports KaTeX syntax:
Inline formula: $E = mc^2$
Block formula:
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$
Code Highlighting
Supports multiple programming languages:
// JavaScript example
function uploadImage(file) {
return new Promise((resolve, reject) => {
// Upload logic
});
}
# Python example
def process_markdown(content):
"""Process Markdown content"""
return content.strip()
📝 Changelog
0.0.1 (Current Version)
- ✅ Initial release
- ✅ Basic Markdown editing and preview functionality
- ✅ Mermaid diagram support
- ✅ Mathematical formula support
- ✅ Image upload functionality
- ✅ VS Code integration
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
💬 Support
If you like this project, please give it a ⭐️!
Have questions or suggestions? Feel free to:
Enjoy writing Markdown! 🎉
