Markdown Appealing

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.

Features

Multiple Themes

Switch between 3 carefully crafted visual styles:

Each theme loads its own Google Fonts and has distinct rendering for headings, code blocks, blockquotes, lists, tables, and horizontal rules.

Sidebar Table of Contents

• 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

Search (Cmd+K)

• Press Cmd+K (or Ctrl+K) 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)

Dark / Light / System Mode

• 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

Live Preview

• Updates in real-time as you edit
• Follows your active markdown file
• Opens in the same tab (replaces the editor)

Code Blocks

• Language label in header
• Copy button with "Copied" feedback
• Line numbers (visible in Terminal theme)
• Styled borders and backgrounds per theme

Usage

Open Preview

1. Open any .md file
2. Use one of:
   • Keyboard: Cmd+Shift+V (Mac) / Ctrl+Shift+V (Windows/Linux)
   • Command Palette: Cmd+Shift+P > Markdown Appealing: Open Preview

Switch Theme

• Click theme buttons in the toolbar (Clean / Editorial / Terminal)
• Or use Command Palette: Markdown Appealing: Switch Theme

Toggle Dark/Light Mode

• Click the toggle switch in the toolbar
• Or use Command Palette: Markdown Appealing: Toggle Dark/Light Mode

Search

• Press Cmd+K / Ctrl+K while the preview is focused
• Type your query (minimum 2 characters)
• Enter to jump to next match
• Shift+Enter to jump to previous match
• Esc to close

Collapse Sidebar

• Click the toggle button at the top of the sidebar
• In collapsed mode, mini dots represent top-level headings -- click them to navigate

Keyboard Shortcuts

Theme Showcase

Clean Theme

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

Editorial Theme

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

Terminal Theme

Hacker-native. Built for code-heavy docs

• Monospace headings (IBM Plex Mono), sans body (IBM Plex Sans)
• Green accent color
• # / ## / ### prefixes on headings
• NOTE label on blockquotes
• Arrow -> list markers
• * * * horizontal rules
• Line numbers on code blocks

Installation

From Source (Development)

git clone <repo-url>
cd markdown-appealing
npm install
npm run compile

Then press F5 in VS Code to launch the Extension Development Host.

From VSIX

npm run vscode:prepublish
npx vsce package
code --install-extension markdown-appealing-0.1.0.vsix

Requirements

• VS Code 1.85.0 or later

License

MIT