Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/mathedu4all/mmarked-vscode-extension

An alternative to the builtin markdown previewer based on @mathcrowd/mmarked.
https://github.com/mathedu4all/mmarked-vscode-extension

markdown markdown-previewer vscode-extension

Last synced: 2 months ago
JSON representation

An alternative to the builtin markdown previewer based on @mathcrowd/mmarked.

Awesome Lists containing this project

README 

          
# MMarked - Enhanced Markdown Preview for VS Code



[![Version](https://img.shields.io/visual-studio-marketplace/v/MCLab.mmarked?label=Version&color=blue)](https://marketplace.visualstudio.com/items?itemName=MCLab.mmarked)

[![Installs](https://img.shields.io/visual-studio-marketplace/i/MCLab.mmarked?label=Installs&color=success)](https://marketplace.visualstudio.com/items?itemName=MCLab.mmarked)

[![Downloads](https://img.shields.io/visual-studio-marketplace/d/MCLab.mmarked?label=Downloads&color=orange)](https://marketplace.visualstudio.com/items?itemName=MCLab.mmarked)

[![Rating](https://img.shields.io/visual-studio-marketplace/r/MCLab.mmarked?label=Rating&color=yellow)](https://marketplace.visualstudio.com/items?itemName=MCLab.mmarked)

[![License](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)



A powerful Visual Studio Code extension that brings advanced Markdown rendering with LaTeX math support, powered by [@mathcrowd/mmarked](https://github.com/mathedu4all/mmarked).



**[中文文档](./README.zh.md)** | **[Marketplace](https://marketplace.visualstudio.com/items?itemName=MCLab.mmarked)** | **[GitHub](https://github.com/mathedu4all/mmarked-vscode-extension)**



## 📖 Overview



Transform your Markdown editing experience with **MMarked** - a specialized preview extension designed for educational and mathematical content. Built on the powerful [@mathcrowd/mmarked](https://github.com/mathedu4all/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



### Media & Customization

- 🖼️ **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)

1. Open Visual Studio Code

2. Go to Extensions view (`Ctrl+Shift+X` or `Cmd+Shift+X` on Mac)

3. Search for **"mmarked"**

4. Click **Install**



### Method 2: Quick Install

Click here: [Install MMarked](vscode:extension/MCLab.mmarked)



### Method 3: Command Line

```bash

code --install-extension MCLab.mmarked

```



## 📘 Usage



### Quick Start

1. **Open** any Markdown file (`.md`)

2. **Click** the VSCode preview button (👁️) in the editor title bar for standard preview, or

3. **Press** `Ctrl+Shift+P` (or `Cmd+Shift+P` on Mac) to open the command palette

4. **Type** and select: `Markdown: Open Preview` for mmarked preview

5. **Edit** your Markdown and see live updates in the preview pane



### Copy to WeChat Official Account

1. **Open** your Markdown file

2. **Click** the copy button (📋) in the editor title bar, or use command palette

3. **Select**: `Copy HTML for WeChat`

4. **Paste** into WeChat Official Account editor - formatting preserved!



### Keyboard Shortcuts

You can assign custom keyboard shortcuts in VS Code:

1. Go to `File` > `Preferences` > `Keyboard Shortcuts`

2. Search for `mmarked.previewMarkdown` or `mmarked.copyToWeChat`

3. 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



```json

{

  "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:



```json

{

  "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:**

- [MMarked Product Page](https://lab.mathcrowd.cn/mmarked)

- [MMarked GitHub Repository](https://github.com/mathedu4all/mmarked)

- [Documentation & Syntax Guide](https://lab.mathcrowd.cn/mmarked)



## 🤝 Support & Community



### Get Help

- 🐛 **Bug Reports:** [GitHub Issues](https://github.com/mathedu4all/mmarked-vscode-extension/issues)

- 💡 **Feature Requests:** [GitHub Issues](https://github.com/mathedu4all/mmarked-vscode-extension/issues)

- 📖 **Documentation:** [MMarked Docs](https://lab.mathcrowd.cn/mmarked)

- 💬 **Community Chat:** [Join Our Discord](https://discord.gg/6VMUVA5Yq2)



### Library-Specific Issues

For questions about the `@mathcrowd/mmarked` library itself (not the VS Code extension), please [open an issue](https://github.com/mathedu4all/mmarked/issues) 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

- 🌐 [MCLab Official Website](https://lab.mathcrowd.cn)

- 📚 [Online Math Community](https://www.mathcrowd.cn)

- 💬 [Discord Server](https://discord.gg/6VMUVA5Yq2)

- 💖 [Support Our Work](https://www.mathcrowd.cn/crowd-funding/charging)



## 🛠️ Development & Contributing



Interested in contributing to this extension? We welcome pull requests, bug reports, and feature suggestions!



**For developers and contributors, see:**

- **[CONTRIBUTING.md](CONTRIBUTING.md)** - Complete development guide

- **[GitHub Repository](https://github.com/mathedu4all/mmarked-vscode-extension)** - Source code

- **[Changelog](CHANGELOG.md)** - Version history



## 📄 License



This extension is licensed under the [MIT License](LICENSE).



---



## 🙏 Acknowledgments



- Built with [@mathcrowd/mmarked](https://github.com/mathedu4all/mmarked)

- Math rendering powered by [MathJax](https://www.mathjax.org/)

- Code highlighting by [highlight.js](https://highlightjs.org/)



---



**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](https://marketplace.visualstudio.com/items?itemName=MCLab.mmarked&ssr=false#review-details) on the Marketplace!