A lightweight, modern Markdown editor plugin that provides a smooth editing experience similar to Obsidian.
PurrMD is a WYSIWYG Markdown editing plugin for CodeMirror6. This project focuses on the Markdown editing plugin component rather than being a complete editor.
# npm
npm install --save purrmd codemirror @codemirror/view
# pnpm
pnpm add purrmd codemirror @codemirror/view
# yarn
yarn add purrmd codemirror @codemirror/viewimport { EditorView } from '@codemirror/view';
import { basicSetup } from 'codemirror';
import { purrmd, purrmdTheme } from 'purrmd';
const view = new EditorView({
doc: '# Hello PurrMD',
parent: document.getElementById('root')!,
extensions: [
basicSetup,
purrmd(),
purrmdTheme(),
],
});- WYSIWYG Editing - Instant preview of Markdown rendering
- GFM Compatible - Supports GitHub Flavored Markdown
- Shortcut Support - Hotkeys to improve editing efficiency
- Slash Menu - Quickly insert Markdown syntax elements
| Feature | Syntax Example |
|---|---|
| Headings | # H1 ~ ###### H6 |
| Bold | **bold** |
| Italic | *italic* |
| Strikethrough | ~~strikethrough~~ |
| Highlight | ==highlight== |
| Inline Code | `code` |
| Link | [text](url) |
| Image |  |
| Bullet List | - Bullet List |
| Ordered List | 1. Ordered List |
| Bullet Task List | - [ ] Bullet Task List |
| Ordered Task List | 1. [ ] Ordered Task List |
| Blockquote | > Blockquote |
| Horizontal Rule | --- |
| Code Block | ```javascript console.log("Hello PurrMD");``` |
PurrMD provides the following shortcuts to improve editing efficiency:
Ctrl+B - Bold
Ctrl+I - Italic
Ctrl+D - Strikethrough
Ctrl+H - Highlight
Typing the / character in the editor triggers a slash menu, allowing quick insertion of various Markdown syntax elements
Special thanks to these excellent projects for inspiration:
- HyperMD - Pioneering WYSIWYG Markdown editing experience
- ProseMark - Reference implementation for CodeMirror6 Markdown
- CodeMirror6 - Powerful editor core
Without the above projects, PurrMD would not exist.
Q：Since CodeMirror6 already has ProseMark, why does this project exist?
A：The initial purpose of this editor was to provide Markdown editing support for my personal note-taking app LonaNote. Implementing it myself makes it easier to extend and customize editor features.
Q：Does it support Vue/React?
A：The CodeMirror editor is framework-agnostic and can be easily integrated with any frontend framework.