VSCode Beautiful MD

Stop reading raw markdown. Start reading beautiful documents.

A WYSIWYG markdown editor that renders your .md files as clean, rich documents — directly inside VSCode. No preview pane. No split view. Just open a file and see it beautifully rendered.

Before & After

Without Beautiful MD — raw syntax, hard to scan:

With Beautiful MD — clean, readable, interactive:

Why Beautiful MD?

Most markdown extensions give you a side-by-side preview. You still stare at raw syntax half the time.

Beautiful MD replaces the editor. When you open a .md file, you see the final result immediately — styled headings, rendered tables, interactive checklists, formatted code blocks. No commands to run, no panels to open.

Need to edit? Hit Source and you're back to raw markdown. Hit Preview and you're back to the beautiful view. That's it.

Features

• Instant rich rendering — .md files open as formatted documents by default
• Interactive checklists — click to check/uncheck directly in preview, the source file updates automatically
• Source/Preview toggle — switch between raw markdown and rich view with one click
• Formatting toolbar — bold, italic, headings, lists, code blocks, links, and more
• Keyboard shortcuts — Cmd+B for bold, Cmd+I for italic, Tab for indent
• GFM support — tables, strikethrough, task lists, fenced code blocks
• Adapts to your theme — respects your VSCode dark/light theme colors
• Empty file detection — new .md files open directly in source mode, ready to write
• Secure — HTML sanitized with DOMPurify, strict Content Security Policy, no unsafe-inline

Getting Started

1. Install the extension

Search for "VSCode Beautiful MD" in the Extensions panel, or install from a .vsix file:

code --install-extension vscode-beautiful-md-0.1.0.vsix

2. Open any .md file

It renders automatically. No command needed.

3. Switch editor (optional)

If you want to switch between Beautiful MD and the classic text editor:

1. Press Cmd+Shift+P (or Ctrl+Shift+P)
2. Type "Reopen"

3. Select "VSCode Beautiful MD" to use the rich view, or "Text Editor" for classic mode

Toolbar Actions

Available in Source mode:

Security

Beautiful MD is built with security as a priority:

• DOMPurify sanitizes all rendered HTML with a strict whitelist of tags and attributes
• Content Security Policy blocks inline scripts and styles — only nonce-authenticated scripts run
• No external requests — all dependencies (marked.js, DOMPurify) are bundled locally
• No data collection — the extension only reads and writes your local .md files

Contributing

Found a bug? Have a feature idea? Open an issue on GitHub.

License

MIT