Markdown Wright
Live Markdown editing that never rewrites your source.
Markdown Wright renders your Markdown inline as you type — headings, tables, images, Mermaid, math — while you edit the real .md text. Syntax markers hide on inactive lines and reveal the moment your cursor enters, so it feels like a rendered document but you're always editing plain Markdown.
It opens .md files directly (a custom editor — no separate preview pane), right inside your repo.
Why it's different
Most "rich" Markdown editors are WYSIWYG: they load your file into a rich-text model and re-serialize it on save — which can silently reformat your Markdown (reordered attributes, converted tables, normalized whitespace). Markdown Wright is the opposite by design:
- Edits the source, not a copy. There's no rich-text model. You're editing the actual Markdown text — always.
- Byte-exact. It never re-serializes, so your file only changes where you type. No surprise reformatting, clean git diffs.
- Plain-text muscle memory. Everything is still Markdown — copy/paste, multi-cursor, and your habits just work.
- In VS Code, in your repo. Your files stay in place and git-tracked; nothing is imported into a separate store.
- Opt-in, never intrusive. Registered as
priority: "option" — it won't hijack .md unless you ask it to.
If you want a Word-like WYSIWYG surface, other extensions do that. If you want your Markdown rendered live without ever touching your source, that's this.
Features
Live-preview editing
- Edit the actual Markdown text; syntax markers hide on inactive lines and reappear when your cursor enters an element.
- Byte-exact — no rich-text model, no re-serialization, so your source is never rewritten.
- Follows your VS Code theme (light / dark / high-contrast) and font.
Rich rendering, inline
- Headings, bold/italic/strikethrough, inline code, blockquotes, horizontal rules, and code blocks.
- Task lists with clickable checkboxes.
- Tables (GFM), images (local + remote), links (Ctrl/Cmd-click to open).
- Mermaid diagrams, math (KaTeX,
$…$ and $$…$$).
- GFM callouts —
> [!NOTE], [!TIP], [!IMPORTANT], [!WARNING], [!CAUTION] render as colored boxes.
- Each renderer can be toggled off individually.
- Formatting toolbar (bold/italic/strike/code, headings, lists, quote, link, and a Table split-button).
- Keyboard toggles: Bold
Ctrl+B, Italic Ctrl+I.
- Smart lists — Enter continues
-/1. markers (auto-numbering), empty item exits, Tab/Shift+Tab indent.
- Paste a URL over selected text → turns it into a Markdown link.
- Insert Table and Paste as Table (converts copied CSV/Excel cells).
- Paste or drag-and-drop an image → saved next to the document and linked automatically.
Navigation & quality
- Find / Replace widget (
Ctrl+F / Ctrl+H) with match-case / whole-word / regex.
- Go to Line (
Ctrl+G) and Go to Heading (Ctrl+Shift+O).
- Optional line-number gutter; word count + reading time in the status bar.
- markdownlint issues in the Problems panel, with a Fix All command.
Export
- Export to HTML — a fully self-contained, offline file (math + diagrams embedded; no CDN needed to view it).
Getting started
- Per file: right-click a
.md tab → Reopen Editor With… → Markdown Wright.
- Automatically: enable
Markdown Wright: Open Markdown As Rendered — every .md opens in Markdown Wright (manages workbench.editorAssociations).
Keybindings
| Action |
Key |
| Bold / Italic |
Ctrl+B / Ctrl+I |
| Find / Replace |
Ctrl+F / Ctrl+H |
| Find next / previous |
F3 / Shift+F3 |
| Go to Line |
Ctrl+G |
| Go to Heading |
Ctrl+Shift+O |
Settings
| Setting |
Default |
Description |
markdownWright.openMarkdownAsRendered |
false |
Auto-open all .md in Markdown Wright. |
markdownWright.fontFamily |
"" |
Reading font (empty = VS Code UI font). Code stays monospace. |
markdownWright.fontSize |
0 |
Content font size in px (0 = editor font size). |
markdownWright.showLineNumbers |
false |
Show a line-number gutter. |
markdownWright.showToolbar |
true |
Show the formatting toolbar. |
markdownWright.enableMermaid / enableMath / enableImages / enableTables |
true |
Toggle individual inline renderers. |
markdownWright.imageSaveDir |
"" |
Folder (relative to the file) for pasted images. |
markdownWright.lint |
true |
Lint with markdownlint (Problems panel). |
Known limitations
Because this is a webview-based custom editor (not a text editor), a few native VS Code integrations don't apply to it:
- AI assistants (Copilot Chat, Claude Code, etc.) that read the active text editor won't see a file open in Markdown Wright as the "active file" for their context, because
activeTextEditor is empty for custom editors. Options: use Open in Text Editor (toolbar 📄 icon, tab right-click, or the Markdown Wright: Open in Text Editor command); attach the file manually in the AI tool (#file in Copilot, @file in Claude Code / Continue / Cody — this works because the document still exists); or keep the default off so .md opens as text unless you ask for the rendered view.
- Find-in-files results and the global Go to Line open the file but don't scroll inside the rendered view ([VS Code #211351](https://github.com/microsoft/vscode/issues/211351)). Use the built-in Find (
Ctrl+F) / Go to Line (Ctrl+G), or Reopen With → Text Editor.
Both are inherent to the custom-editor approach; the extension stays opt-in (priority: option) so none of this is forced on you.
Development
npm install
npm run build # or: npm run watch
npm test # round-trip fidelity tests
Press F5 to launch the Extension Development Host.
License
MIT. Bundled open-source components are listed in THIRD-PARTY-NOTICES.md.
| |
