MMarked - Enhanced Markdown Preview for VS Code
A powerful Visual Studio Code extension that brings advanced Markdown rendering with LaTeX math support, powered by @mathcrowd/mmarked.
中文文档 | Marketplace | GitHub
📖 Overview
Transform your Markdown editing experience with MMarked - a specialized preview extension designed for educational and mathematical content. Built on the powerful @mathcrowd/mmarked library, it brings real-time rendering of complex LaTeX formulas, theorem blocks, and custom syntax to your VS Code workspace.
Perfect for:
- 📚 Educators creating math course materials
- 🎓 Students writing technical notes and assignments
- 📝 Researchers authoring academic papers
- 💡 Anyone working with mathematical notation in Markdown
✨ Features
Core Capabilities
- ✅ Full CommonMark Support - Complete compatibility with standard Markdown syntax
- ⚡ Real-Time Preview - Instant visual feedback as you type (300ms debounced)
- 🌗 Smart Theme Switching - Automatically adapts to your VS Code theme (light/dark)
- 📋 WeChat Export - One-click copy HTML optimized for WeChat Official Account editor
Mathematical Content
- 🧮 Advanced LaTeX Rendering - Powered by MathJax for professional-quality formulas
- 📐 TeX to SVG Conversion - Optional high-quality SVG output for equations
- 🔢 Auto-Numbered Footnotes - Easy-to-use reference system
Educational Features
- 📘 Theorem-Like Blocks - Dedicated syntax for theorems, lemmas, definitions, and examples
- Auto-numbering support
- Cross-reference linking
- Customizable titles
- 🔍 Collapsible Solution Blocks - Hide/show answers with toggle buttons
- 🎯 Syntax Highlighting - Code blocks enhanced by highlight.js
- 🖼️ Local Image Support - Automatic path resolution for relative images
- 📏 Image/Video Resizing - Simple syntax for custom dimensions
- 🎨 Custom CSS - Configure your own stylesheets for complete control
🚀 Installation
Method 1: VS Code Marketplace (Recommended)
- Open Visual Studio Code
- Go to Extensions view (
Ctrl+Shift+X or Cmd+Shift+X on Mac)
- Search for "mmarked"
- Click Install
Method 2: Quick Install
Click here: Install MMarked
Method 3: Command Line
code --install-extension MCLab.mmarked
📘 Usage
Quick Start
- Open any Markdown file (
.md)
- Click the VSCode preview button (👁️) in the editor title bar for standard preview, or
- Press
Ctrl+Shift+P (or Cmd+Shift+P on Mac) to open the command palette
- Type and select:
Markdown: Open Preview for mmarked preview
- Edit your Markdown and see live updates in the preview pane
Copy to WeChat Official Account
- Open your Markdown file
- Click the copy button (📋) in the editor title bar, or use command palette
- Select:
Copy HTML for WeChat
- Paste into WeChat Official Account editor - formatting preserved!
Keyboard Shortcuts
You can assign custom keyboard shortcuts in VS Code:
- Go to
File > Preferences > Keyboard Shortcuts
- Search for
mmarked.previewMarkdown or mmarked.copyToWeChat
- Set your preferred key bindings
Tips
- The preview updates automatically with a 300ms delay as you type
- Preview panel opens in the second editor column by default
- Local images are automatically resolved relative to your document
- WeChat export includes inlined CSS for consistent rendering
⚙️ Configuration
Customize the extension by adding settings to your VS Code configuration file (.vscode/settings.json or User Settings):
Available Settings
| Setting |
Type |
Default |
Description |
mmarked.cssUrl |
string |
https://cdn2.mathcrowd.cn/assets/styles/mathcrowd.css |
URL for the light theme stylesheet |
mmarked.darkCssUrl |
string |
https://cdn2.mathcrowd.cn/assets/styles/mathcrowd-dark.css |
URL for the dark theme stylesheet |
mmarked.enableTex2svg |
boolean |
false |
Enable TeX to SVG conversion for better quality math rendering |
mmarked.removeLinksForWeChat |
boolean |
false |
Remove hyperlinks when copying to WeChat |
mmarked.showPreviewButton |
boolean |
false |
Show mmarked preview button in editor title bar (use command palette instead to avoid duplicate buttons) |
Example Configuration
{
"mmarked.cssUrl": "https://cdn2.mathcrowd.cn/assets/styles/mathcrowd.css",
"mmarked.darkCssUrl": "https://cdn2.mathcrowd.cn/assets/styles/mathcrowd-dark.css",
"mmarked.enableTex2svg": true,
"mmarked.removeLinksForWeChat": false,
"mmarked.showPreviewButton": false
}
Using Custom Stylesheets
You can use your own CSS by providing a custom URL:
{
"mmarked.cssUrl": "https://your-domain.com/styles/custom-light.css",
"mmarked.darkCssUrl": "https://your-domain.com/styles/custom-dark.css"
}
Note: Custom CSS must be hosted on a public URL (local files are not supported for security reasons).
📚 About MMarked
MMarked is a specialized Markdown renderer designed for educational and mathematical content. It extends standard Markdown with powerful features for academic writing, including theorem blocks, numbered definitions, collapsible solutions, and advanced LaTeX support.
🔗 Learn More:
Get Help
Library-Specific Issues
For questions about the @mathcrowd/mmarked library itself (not the VS Code extension), please open an issue on the MMarked repository.
🌟 About Mathcrowd
Mathcrowd is an innovative education technology company founded by experienced developers and educators, dedicated to transforming mathematics education through cutting-edge technology. We create engaging, interactive, and visualized learning experiences for math enthusiasts and self-learners.
Connect With Us
🛠️ Development & Contributing
Interested in contributing to this extension? We welcome pull requests, bug reports, and feature suggestions!
For developers and contributors, see:
📄 License
This extension is licensed under the MIT License.
🙏 Acknowledgments
Note: This extension bundles @mathcrowd/mmarked to ensure compatibility and optimal performance.
Enjoy using MMarked! ⭐ If you find it helpful, please consider leaving a review on the Marketplace!
