MD Pretty Viewer

Where your markdown becomes a masterpiece.
_{내가 쓴 마크다운이 작품이 되는 순간.}

_{Live preview that doesn't suck. 13 themes for every mood. PDF export that actually looks good.
LaTeX math, clipboard image paste, auto TOC, Korean-first typography — all bundled, all offline.}

Live preview  ·  13 themes  ·  Outline  ·  PDF export  ·  Korean-first typography

Install →  ·  Homepage  ·  Live Demo  ·  Report Bug

_{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.

📄 Export as PDF

Save the rendered preview as a PDF via the system print dialog. A4-optimized layout with smart page breaks.

🧮 LaTeX Math (KaTeX)

Render math: $E = mc^2$ inline, $$\int_0^\infty e^{-x^2}dx$$ block. KaTeX fonts bundled — works offline.

🖼 Clipboard Image Paste

Capture a screenshot, switch to Edit mode, press Cmd/Ctrl+V → image auto-inserted as base64 markdown.

📑 Auto Table of Contents

Insert [[TOC]] or [[목차]] anywhere in your markdown → auto-generated, clickable TOC with proper indentation.

📌 Sticky Headings

Current H1/H2 stays pinned at the top while scrolling long documents.

💾 Save Status Indicator

Status bar shows ● Modified / ◐ Saving / ✓ Saved in real time.

📦 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.7.0.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을 클립보드에 복사
• PDF로 저장 — 툴바 PDF 버튼 → 시스템 인쇄 다이얼로그에서 "PDF로 저장" (A4 최적화)

설치

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.}