MD Pretty Viewer

Beautiful markdown, in VS Code.
_{마크다운을 예쁘게. VS Code에서.}

Live preview · 7 color themes · Outline sidebar · Formatting toolbar · Syntax highlighting

🏠 Homepage · ▶ Live Demo · 🐛 Report Issue

English · 한국어

✨ Features

🎯 Three View Modes

• Preview — Read the rendered markdown beautifully
• Edit — Edit raw markdown in a clean monospace editor
• Split — Side-by-side editor and preview with scroll sync

Double-click on preview mode to switch to edit instantly.

🎨 13 Color Themes

Classic: Blue · Green · Rose · Purple · Amber · Neutral · Mono 2026 Pantone trend: Peach · Aqua · Orchid Eye-friendly: Sage · Sepia · Mist Auto-optimized for VS Code's light / dark / high-contrast modes.

🛠 Formatting Toolbar

Headings (H1-H3), bold, italic, code, links, lists (bullet/numbered), blockquote, horizontal rule — apply with a single click after selecting text.

📑 Outline Sidebar

Automatically extracts H1-H4 headings into a navigable tree. Click to smooth-scroll to any section.

💻 Code Highlighting

Based on highlight.js. Code block colors adapt to your selected theme.

📝 Full GitHub Flavored Markdown Support

Tables · checkboxes · strikethrough · fenced code blocks · autolinks · emoji.

🔤 Font Size Control

12px to 24px, adjustable from the toolbar. Settings persist automatically.

🇰🇷 Korean Typography

Bundles 에이투지체 (AtoZ font) for exceptional Korean text rendering (OFL licensed).

# Line Numbers

Minimal, unobtrusive line numbers in Edit/Split mode — "barely there" by design.

↵ Smart List Continuation

Press Enter in a list item to auto-insert the next marker. Numbered lists auto-increment. Empty list item exits the list.

● Focus Mode

Hide toolbars, status bar, and outline to focus purely on writing. One click into Zen mode.

🔍 Find (Cmd+F)

Native VS Code find widget to search within the preview.

☐ Clickable Checkboxes

Click checkboxes directly in Preview — source markdown updates automatically.

</> Copy as HTML

Copy the rendered HTML output to clipboard with one click.

📦 Installation

From Marketplace (Recommended)

1. Open Extensions panel (Ctrl+Shift+X / Cmd+Shift+X)
2. Search md pretty viewer
3. Click Install

Command Line

code --install-extension innohi.md-pretty-viewer

Manual VSIX

Download .vsix from Releases, then:

code --install-extension md-pretty-viewer-0.5.4.vsix

⌨️ Keyboard Shortcuts

⚙️ Settings

Configure via settings.json:

{
  // Default color theme (blue | green | rose | purple | amber | neutral | mono)
  "mdPrettyViewer.defaultTheme": "blue",

  // Default preview font size (12-24px)
  "mdPrettyViewer.defaultFontSize": 16,

  // Default view mode when opening a .md file (preview | edit | split)
  "mdPrettyViewer.defaultMode": "preview",

  // Show outline sidebar by default
  "mdPrettyViewer.showOutline": false
}

🖥 Commands

Open Command Palette (Ctrl/Cmd + Shift + P) and search MD Pretty Viewer:

• MD Pretty Viewer: Toggle Preview/Edit Mode
• MD Pretty Viewer: Bold
• MD Pretty Viewer: Italic
• MD Pretty Viewer: Code

📋 Requirements

• VS Code: 1.74.0 or later
• Platforms: Windows, macOS, Linux
• External dependencies: None (marked.js and highlight.js are bundled)

⚠️ Known Limitations

• Designed for single-file editing (multiple tabs work independently)
• Very large markdown files (>10,000 lines) may show performance degradation
• Diagram rendering (Mermaid, PlantUML) is not supported

🔒 Security

This extension uses strict VS Code webview CSP and defensively blocks:

• Raw HTML in markdown (auto-escaped)
• javascript:, vbscript:, data: URL schemes in links and images
• Adds rel="noopener noreferrer" to all external links

No data is collected or sent over the network.

See SECURITY.md for full security design and vulnerability reporting.

To report a vulnerability, please open a private GitHub Security Advisory.

🤝 Contributing

Issues, feature requests, and PRs are welcome.

• Report a bug
• Request a feature
• Contributing Guide

📜 Changelog

See CHANGELOG.md for release history.

📦 Bundled Open Source

This extension bundles the following libraries:

Full license texts in NOTICE.md.

📄 License

MIT License © 2026 INNO-HI Inc.

🇰🇷 한국어

주요 기능

• 3가지 뷰 모드 — Preview / Edit / Split. 더블클릭으로 즉시 편집
• 13가지 컬러 테마 — Blue/Green/Rose/Purple/Amber/Neutral/Mono + Pantone 2026 (Peach/Aqua/Orchid) + 눈 피로 낮은 테마 (Sage/Sepia/Mist)
• 서식 도구 — 헤딩, 볼드, 이탤릭, 코드, 링크, 리스트, 인용, 수평선
• 아웃라인 사이드바 — H1~H4 자동 추출, 클릭으로 이동
• 코드 하이라이팅 — highlight.js 기반, 테마 색상 자동 적용
• 한글 최적화 — 에이투지체(AtoZ font, OFL) 번들로 깔끔한 한글 표기
• 폰트 크기 — 12px ~ 24px 자유 조절
• GFM 완벽 지원 — 테이블, 클릭 가능한 체크박스, 취소선
• 줄 번호 표시 — Edit/Split 모드에서 미니멀한 줄 번호
• 리스트 자동 이어쓰기 — 리스트에서 Enter 치면 다음 마커 자동 생성
• 포커스 모드 — 한 번 클릭으로 글쓰기에 집중하는 Zen 모드
• 찾기 기능 — Cmd+F로 프리뷰 내 텍스트 검색
• HTML 복사 — 렌더링된 HTML을 클립보드에 복사

설치

VS Code Extensions에서 md pretty viewer 검색 후 Install. 또는:

code --install-extension innohi.md-pretty-viewer

설정

settings.json에서 조정:

{
  "mdPrettyViewer.defaultTheme": "blue",       // 기본 테마
  "mdPrettyViewer.defaultFontSize": 16,         // 기본 폰트 크기
  "mdPrettyViewer.defaultMode": "preview",      // 기본 모드
  "mdPrettyViewer.showOutline": false           // 아웃라인 기본 표시
}

단축키

_{Made with ♥ by INNO-HI Inc.}