Markdown Rendered Pro
A premium markdown reading experience inside VS Code. Live preview, scroll sync, and beautiful typography — without leaving your editor.
Features
Beautiful Reader
- Modern typography with comfortable spacing
- Dark mode and light mode (follows VS Code theme, or force via setting)
- Responsive layout with smooth scrolling
- Native VS Code appearance
- Customizable font family, size, line height, and content width
- Real-time preview as you type
- Automatic scroll synchronization between editor and preview
- Click a heading in the preview to jump to the source line
- Cursor line highlight in the preview
Rendering Power
| Feature |
Description |
| Syntax Highlighting |
Shiki-powered code blocks with themes |
| Math |
KaTeX inline and block equations |
| Diagrams |
Mermaid flowcharts, sequence diagrams, and more |
| Tables |
Styled tables with sticky headers |
| Task Lists |
Interactive checkbox lists |
| Footnotes |
Standard markdown footnotes |
| Admonitions |
Note, warning, tip, and caution callouts |
| Code Blocks |
Language label, copy button, optional line numbers and word wrap |
| Images |
Click-to-zoom overlay |
| Styling |
Bold, italic, strikethrough, highlight, sub/superscript, definition lists, keyboard tags |
Commands
| Command |
Description |
Markdown Rendered Pro: Toggle Preview |
Open/close the reader view |
Markdown Rendered Pro: Export as HTML |
Export the rendered document as HTML |
Markdown Rendered Pro: Export as PDF |
Export the rendered document as PDF |
Markdown Rendered Pro: Reveal Source Line |
Jump from preview heading to the source line |
Settings
| Setting |
Default |
Description |
markdownReader.theme |
auto |
Color theme for the reader (auto/light/dark) |
markdownReader.fontFamily |
system |
Font family for the reader |
markdownReader.fontSize |
16 |
Font size for the reader |
markdownReader.lineHeight |
1.7 |
Line height for the reader |
markdownReader.contentWidth |
800 |
Maximum content width in pixels |
markdownReader.autoScrollSync |
true |
Enable automatic scroll synchronization |
markdownReader.enableMermaid |
true |
Enable Mermaid diagram rendering |
markdownReader.enableMath |
true |
Enable KaTeX math rendering |
markdownReader.enableImageZoom |
true |
Enable image zoom on click |
markdownReader.enableAnimations |
true |
Enable animations and transitions |
markdownReader.lineNumbers |
false |
Show line numbers in code blocks |
markdownReader.codeWordWrap |
false |
Enable word wrap in code blocks |
Installation
From VS Code Marketplace
- Open VS Code
- Go to Extensions (
Ctrl+Shift+X)
- Search for "Markdown Rendered Pro"
- Click Install
From VSIX
code --install-extension markdown-rendered-pro-1.0.0.vsix
Usage
- Open any
.md file
- Right-click the editor tab and choose "Open with..." → Markdown Rendered Pro, or run
Markdown Rendered Pro: Toggle Preview from the Command Palette (Ctrl+Shift+P)
- Write markdown and watch the preview update live
Mermaid Example
graph TD
A[Start] --> B{Is it working?}
B -->|Yes| C[Great!]
B -->|No| D[Fix it]
D --> B
Math Example
$$
\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$
Requirements
Extension Settings
This extension contributes the following settings:
markdownReader.* — see table above
Known Issues
- Mermaid rendering depends on the local network for CDN assets in some environments
- Very large markdown files may affect preview performance
- Export to PDF requires a Chromium-based browser for best fidelity
Release Notes
See CHANGELOG.md for release history.
License
MIT
Architecture
Built with a pipeline-based renderer. Markdown is parsed with markdown-it (plus plugins for abbreviations, anchors, containers, emoji, footnotes, and more), then enhanced with Shiki for syntax highlighting, KaTeX for math, and Mermaid for diagrams.
src/
commands/ # Extension commands
extension/ # Activation, controller, watchers
preview/ # Webview provider and HTML template
renderer/ # Markdown parsing and rendering pipeline
webview/ # Preview UI (search, scroll, keyboard, click)
state/ # Shared state and configuration
sync/ # Scroll and cursor synchronization
utils/ # Helper functions
types/ # TypeScript types
