🚀 OpenMD
Markdown preview in your real browser — right-click any .md file. Live auto-refresh, Mermaid, KaTeX math, GitHub alerts. 100% offline.
🆚 Why not the built-in preview?
VS Code's built-in preview (Ctrl+Shift+V) is fine — until you need more:
|
Built-in preview |
OpenMD |
| Open in your real browser (full width, zoom, print) |
❌ |
✅ |
| Mermaid diagrams |
❌ |
✅ offline |
KaTeX math ($..$ / $$..$$) |
❌ |
✅ offline |
GitHub alerts ([!NOTE], [!WARNING], …) |
❌ |
✅ |
Emoji shortcodes (:rocket: → 🚀) |
❌ |
✅ |
| Footnotes with backlinks |
❌ |
✅ |
| Copy-code button on code blocks |
❌ |
✅ |
| Light/Dark/Auto theme toggle in the preview |
❌ |
✅ |
| Auto-refresh on save |
✅ panel only |
✅ panel + browser |
| Export to a self-contained HTML file (send it to anyone) |
❌ |
✅ |
| Export to PDF (via the browser's print dialog) |
❌ |
✅ |
| Works fully offline |
✅ |
✅ |
One extension instead of three — no separate Mermaid, math, or alerts plugins needed. Also works in Cursor, Windsurf, and VSCodium via Open VSX.
✨ Features
- 🌐 Open in Browser - Open Markdown in your default browser instantly
- 👁️ Open in Preview - View in VS Code side panel (side-by-side editing)
- 🎨 Syntax Highlighting - Beautiful code highlighting for all languages
- 🧜♀️ Mermaid Diagrams - Render flowcharts, sequence diagrams, and more
- ✅ Task Lists - Interactive checkboxes with GitHub-style
- [x] syntax
- ⚠️ GitHub Alerts - Support for
[!NOTE], [!TIP], [!WARNING], [!CAUTION], [!IMPORTANT]
- 😄 Emoji Shortcodes - Convert
:wave: → 👋, :rocket: → 🚀, :fire: → 🔥
- 🧮 Math (KaTeX) - Render
$inline$ and $$display$$ TeX math, fully offline
- 📝 Footnotes - GitHub-style
[^1] footnotes with backlinks
- 🌓 Dark Mode Toggle - Switch between Light ☀️, Dark 🌙, and Auto 💻 themes
- 🎨 Theme Toggle in Preview - Choose between VS Code theme 🎨, Light ☀️, or Dark 🌙
- 📋 Copy Code Button - One-click copy for all code blocks
- 🔗 Anchor Links - Clickable heading links for easy navigation
- 🔄 Auto-refresh - Save the file and the preview reloads automatically (scroll position preserved)
- 📄 Export to HTML - One self-contained
.html (styles, fonts, Mermaid, and math inlined) — send it to anyone, opens anywhere, no internet needed
- 🖨️ Export to PDF - Opens in your browser and pops the print dialog → Save as PDF, no heavy engine bundled
- 🔌 Works Offline - Mermaid, syntax highlighting, and KaTeX are bundled, no CDN needed
- ⚡ Lightning Fast - Tiny bundled package (~3 MB), click and it's open
📦 Installation
From VS Code Marketplace
- Open VS Code
- Go to Extensions (
Ctrl+Shift+X / Cmd+Shift+X)
- Search for "OpenMD"
- Click Install
From Open VSX Registry
- Open VS Code
- Go to Extensions (
Ctrl+Shift+X / Cmd+Shift+X)
- Click
... → Install from VSIX
- Download from Open VSX
From VSIX File
- Download the latest
openmd-x.y.z.vsix file from Releases
- Open VS Code
- Go to Extensions (
Ctrl+Shift+X / Cmd+Shift+X)
- Click
... → Install from VSIX
- Select the downloaded
.vsix file
🚀 Usage
Method 1: Right-click on File
- In the Explorer, right-click any
.md file
- Choose:
- Open in Browser 🌐 - Opens in your default browser
- Open in Preview 👁️ - Opens in VS Code panel
Method 2: Right-click in Editor
- Open a Markdown file in the editor
- Right-click on the content
- Select the same menu options as Method 1
📝 Example Markdown
## Mermaid Diagram
\`\`\`mermaid
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Success]
B -->|No| D[Retry]
\`\`\`
## GitHub Alerts
> [!NOTE]
> This is a note!
> [!TIP]
> Here's a helpful tip 💡
## Task List
- [x] Install OpenMD
- [ ] Write documentation
- [ ] Share with friends :rocket:
## Emoji
Hello :wave: Welcome! :fire: :sparkles:
📝 License
MIT © Auttapong Tura
🤝 Contributing
Want to contribute? See our Development Guide for setup instructions.
Enjoy! If you like this extension, please consider starring ⭐ the repo!
| |
