Markdown X

Ultimate Markdown Viewer for VSCode with high-quality document export.

Markdown X is a viewer-focused extension. It does not add editing features -- it renders your markdown beautifully and exports it to PDF and Word with page-aware layout.

Features

Preview

• Real-time preview with side-by-side editing
• Syntax highlighting for 20+ languages (server-side via highlight.js)
• Mermaid diagrams -- flowchart, sequence, class, state, gantt, pie, ER
• KaTeX math -- inline $E=mc^2$ and block $$...$$
• Image lightbox -- click to zoom, ESC to close
• Scroll sync -- editor to preview synchronization
• 4 themes -- Auto (follows VS Code), Light, Dark, Sepia

Page Preview

• PDF-based page preview -- generates a real PDF and opens it in a VSCode tab
• 100% accurate -- shows exactly what the exported PDF will look like
• Same-tab refresh -- click again to regenerate with latest changes

Export

• PDF -- via system Chrome/Edge (puppeteer-core, no bundled Chromium)
  • Page-aware layout: tables, images, code blocks avoid splitting
  • Long tables: auto-split with repeated headers
  • Long code blocks: auto-split with "(continued)" labels
  • Header/footer with title and page numbers
  • Configurable page size (A4, A3, Letter, Legal) and margins
  • Auto-opens in system PDF viewer after export
• Word (.docx) -- via html-to-docx
• Print -- opens in system browser with auto-print

Customization

• Font family -- choose from preset Korean/English fonts or enter custom
• Font size -- adjustable via toolbar (+/-), direct input, or settings (10-32px)
• Theme -- Auto, Light, Dark, Sepia
• Custom CSS -- external CSS file or inline CSS
• Code font -- separate font setting for code blocks
• Page size and margins -- for PDF export

Diagram Controls

• Hover to resize -- floating toolbar appears on mermaid diagrams
• Scale 30%-200% with +/- buttons
• Reset to original size
• Auto-save to source -- <!-- mermaid-scale: N% --> comment is inserted into markdown, ensuring PDF export matches the preview

Outline Navigation

• VSCode Outline panel -- auto-generated from headings (H1-H6)
• Hierarchical tree -- nested by heading level
• Click to jump -- navigates editor and preview to heading position
• Quick navigation -- Cmd+Shift+O for symbol search

Commands

Settings

Page Break Handling

Markdown X automatically prevents content from splitting across pages during PDF export:

Diagram Scale

Resize diagrams in the preview and the scale is saved to the markdown source:

<!-- mermaid-scale: 70% -->

This ensures the PDF export renders diagrams at exactly the same size as the preview.

Requirements

• VSCode 1.74+
• Chrome, Edge, or Chromium -- required for PDF export and page preview (auto-detected)

Internationalization

• English (default)
• Korean (ko)

Development

# Install dependencies
npm install

# Compile
npm run compile

# Watch mode
npm run watch

# Run tests
npx ts-node src/markdownParser.test.ts

# Debug: press F5 in VSCode

Project Structure

src/
  extension.ts            Entry point, command registration
  previewProvider.ts       Webview preview panel
  markdownParser.ts        Markdown parser (marked + highlight.js)
  outlineProvider.ts       Document symbol provider for Outline panel
  export/
    exportPdf.ts           PDF export (puppeteer-core)
    previewPdf.ts          PDF page preview in VSCode tab
    exportDocx.ts          Word export (html-to-docx)
    printDocument.ts       Print via browser
    printStyles.ts         Export HTML template + print CSS
    chromeFinder.ts        System Chrome/Edge detection
    pageBreakProcessor.ts  Long table/code auto-split for PDF

Feedback

• Bug reports and feature requests: GitHub Issues

License

MIT

Author

ilovecorea (xieum@icloud.com)