Beautiful markdown preview for VS Code with multiple themes, sidebar table of contents, search, and dark/light mode toggle.
Built for the AI era where we spend more time reading markdown than writing it. Every AI response, every .md file in a repo, every context window -- it's all markdown. This extension makes that reading experience dramatically better.
Switch between 3 carefully crafted visual styles:
| Theme | Style | Best for |
|---|---|---|
| Clean | Inter + Literata, blue accent, airy minimalism | General reading |
| Editorial | Playfair Display + Source Serif, gold accent, magazine-grade | Long-form docs |
| Terminal | IBM Plex Mono, green accent, ## prefixes, line numbers |
Code-heavy docs |
Each theme loads its own Google Fonts and has distinct rendering for headings, code blocks, blockquotes, lists, tables, and horizontal rules.
Fenced code blocks with language mermaid render as visual SVG diagrams inside styled card containers. Supports all Mermaid diagram types — flowcharts, sequence diagrams, state diagrams, ER diagrams, pie charts, and more.
- Themed card container with per-theme styling (rounded, accent-bordered, or dashed)
- Light inner background ensures diagrams render correctly in both dark and light modes
- Error handling — invalid syntax shows a clean "Diagram syntax error" message instead of breaking the preview
Blockquote-style alerts from the GitHub flavor spec render inline with type-specific icon and label:
> [!NOTE] Useful information
> [!TIP] Helpful advice
> [!IMPORTANT] Key information
> [!WARNING] Urgent caveat
> [!CAUTION] Negative consequences- 5 GFM alert types with inline Octicon SVGs (offline — no icon CDN)
- Per-theme voice — soft card in clean, magazine rule in editorial, dashed
[!TYPE]box in terminal - Body supports inline markdown — links, emphasis, code, multi-paragraph
Files with YAML frontmatter (--- delimited key:value blocks) render as a styled metadata card at the top of the preview instead of broken <hr> elements. Two-column key-value layout with row separators, automatic quote stripping, and per-theme styling.
Vim-style heading navigation without leaving the preview:
| Key | Action |
|---|---|
j / k |
Next / previous heading |
gg / G |
First / last heading |
[ / ] |
Previous / next sibling (same level) |
/ |
Open search |
Active heading is highlighted with a cursor bar that persists across re-renders and syncs bidirectionally with the TOC sidebar.
- Auto-generated from headings (h1-h4)
- Tree structure with connector lines
- Scroll-spy highlights the current section as you scroll
- Reading progress bar shows how far through the document you are
- Collapsible to mini dots for more reading space
- Click any heading to smooth-scroll to it
- Press
Cmd+K,Ctrl+K, or/to open the search overlay - Case-insensitive text search across the rendered content
- Matches highlighted inline with current match emphasized
- Navigate with
Enter/Shift+Enter - Match counter shows position (e.g.
3 / 12)
Toggle a distraction-free view in one click or one command.
- Floating button at the bottom-right of the preview, or
Markdown Appealing: Toggle Fullscreenin the Command Palette - Composes VS Code's Zen Mode — hides sidebar, activity bar, status bar, tabs; enters OS fullscreen when your
zenMode.fullScreensetting is on (default on macOS/Windows) - Respects your own
zenMode.*settings instead of overriding them - Double-
Escexits (standard Zen Mode behavior) - Scroll position, active heading, search state, and theme state all survive entry/exit
- System (default): follows your OS preference
- Dark: forced dark mode
- Light: forced light mode
- Cycles through: System -> Dark -> Light -> System
- Each theme has carefully tuned palettes for both modes
Configure fonts and sizes via VS Code settings:
- Body font, heading font, code font
- Body size, code size
- Preview re-renders live when settings change
- Updates in real-time as you edit
- Follows your active markdown file
- Opens in the same tab (replaces the editor)
- Language label in header
- Copy button with "Copied" feedback
- Line numbers (visible in Terminal theme)
- Styled borders and backgrounds per theme
- Open any
.mdfile - Use one of:
- Keyboard:
Cmd+Shift+V(Mac) /Ctrl+Shift+V(Windows/Linux) - Command Palette:
Cmd+Shift+P>Markdown Appealing: Open Preview
- Keyboard:
- Click theme buttons in the toolbar (Clean / Editorial / Terminal)
- Or use Command Palette:
Markdown Appealing: Switch Theme
- Click the toggle switch in the toolbar
- Or use Command Palette:
Markdown Appealing: Toggle Dark/Light Mode
- Press
Cmd+K/Ctrl+Kwhile the preview is focused - Type your query (minimum 2 characters)
Enterto jump to next matchShift+Enterto jump to previous matchEscto close
- Click the toggle button at the top of the sidebar
- In collapsed mode, mini dots represent top-level headings -- click them to navigate
| Shortcut | Action |
|---|---|
Cmd+Shift+V |
Open preview |
Cmd+K or / |
Search in preview |
Enter |
Next search match |
Shift+Enter |
Previous search match |
Esc |
Close search |
j / k |
Next / previous heading |
gg / G |
First / last heading |
[ / ] |
Previous / next sibling heading |
Airy minimalism for distraction-free reading
- Sans-serif headings (Inter), serif body (Literata)
- Blue accent color
- Subtle h1 divider, rounded code blocks
- Hidden line numbers
Magazine-grade typography for long reads
- Display headings (Playfair Display), serif body (Source Serif 4)
- Gold/amber accent color
- Decorative
"on blockquotes - Uppercase "Section" labels on h2
- Gold accent bar above h1
- Ornamental
...horizontal rules
Hacker-native. Built for code-heavy docs
- Monospace headings (IBM Plex Mono), sans body (IBM Plex Sans)
- Green accent color
#/##/###prefixes on headingsNOTElabel on blockquotes- Arrow
->list markers * * *horizontal rules- Line numbers on code blocks
git clone <repo-url>
cd markdown-appealing
npm install
npm run compileThen press F5 in VS Code to launch the Extension Development Host.
npm run vscode:prepublish
npx vsce package
code --install-extension markdown-appealing-0.5.0.vsix- VS Code 1.85.0 or later
MIT