Markdown Lens
A VS Code extension that provides a custom editor for .md files with a preview/edit toggle — similar to how VS Code handles SVG files.
Features
- Preview mode — Rendered Markdown with clean, VS Code theme-aware styling
- Edit mode — Raw Markdown text editor with monospace font
- Toggle — Switch between Preview and Edit with one click
- Live sync — External file changes auto-update the preview
- Multi-panel — Same file open in multiple tabs stays in sync
- Theme-aware — Adapts to your VS Code light/dark theme
- Syntax highlighting — Code blocks with language-aware colors
- Copy button — One-click copy on every code block
Usage
- Open any
.md file in VS Code
- Right-click the tab → "Reopen Editor With..." → "Markdown Lens"
- Click Edit to switch to raw Markdown editing
- Click Preview to switch back to rendered view
Tech Stack
- TypeScript
- markdown-it for Markdown rendering
- highlight.js for syntax highlighting
- VS Code Custom Editor API (
CustomTextEditorProvider)
License
MIT
| |
