Convert Markdown to PDF
Beautiful PDFs from Markdown — with diagrams, presentations, and live preview.
A VS Code extension that turns Markdown into polished, print-ready PDFs using Chrome/Chromium. Supports Mermaid diagrams, Excalidraw sketches, Marp slide decks, syntax-highlighted code blocks, and custom CSS themes — all rendered locally.
Features
- Export to PDF — Convert any
.md file via command palette, editor title bar, or right-click menu (editor and file explorer)
- Live Preview — Side-by-side preview panel that re-renders as you type
- Mermaid Diagrams — Flowcharts, sequence diagrams, class diagrams, and all Mermaid types (v11, bundled — works offline). HTML labels like
<br/> and <b> are supported
- Readable Wide Diagrams — Left-to-right flowcharts too wide for the page are redrawn top-to-bottom; diagrams that barely overflow a page are shrunk slightly instead of leaving a blank gap
- Math — KaTeX formulas: inline
$E = mc^2$, display $$...$$, and ```math blocks. Currency like $5 or $10 is left alone
- Table of Contents — Put
[[toc]] anywhere to insert a linked table of contents (levels 1–3)
- Internal Links & PDF Bookmarks — Headings get GitHub-style ids so
[link](#my-heading) works in the PDF, and the PDF sidebar gets a bookmark per heading
- Page Breaks — Force a new page with
<!-- pagebreak -->
- Excalidraw Sketches — Hand-drawn style SVGs from
```excalidraw JSON blocks
- Marp Presentations — Auto-detects
marp: true front matter and prompts to export as a slide deck PDF (1280x720 per slide) or a regular document PDF
- Diagram Themes — 5 built-in color themes for Mermaid diagrams; inline
style directives are stripped so the theme applies uniformly (set keepDiagramStyles to keep them)
- Page Orientation Picker — When diagrams are detected, prompts to choose Auto, Portrait, or Landscape
- Syntax Highlighting — Code blocks highlighted with highlight.js using a GitHub-inspired theme
- Custom CSS — Apply your own stylesheet (absolute path or relative to workspace root)
- Configurable — Page size, margins, font size, headers, footers, and Chrome path
Commands
| Command |
Description |
Export Markdown to PDF |
Export the active .md file to PDF. Prompts for orientation when diagrams are detected. |
Open PDF Preview |
Open a live preview panel beside the editor. |
Export Markdown to Presentation PDF |
Export as a Marp slide deck PDF (also triggered automatically when marp: true is detected during regular export). |
All three commands are available from:
- Command Palette (
Cmd+Shift+P / Ctrl+Shift+P)
- Editor title bar icons (when a
.md file is open)
- Right-click context menu in the editor or file explorer
Quick Start
- Install from the VS Code Marketplace
- Open any
.md file
Cmd+Shift+P → Export Markdown to PDF- Choose where to save — done!
Diagram Themes
Set convertMdToPdf.diagramTheme in your VS Code settings:
| Theme |
Style |
ocean |
Blue tones — clean and professional (default) |
forest |
Green tones — natural and fresh |
rose |
Pink/purple tones — warm and modern |
slate |
Gray tones — minimal and neutral |
sunset |
Orange/amber tones — warm and energetic |
Themes control node fill, border, text color, connector lines, cluster backgrounds, and edge labels across all Mermaid diagram types.
Settings
All settings are under the convertMdToPdf.* namespace.
| Setting |
Default |
Description |
chromePath |
Auto-detect |
Path to Chrome/Chromium executable. Auto-detected on macOS, Windows, and Linux. User settings only: for security, workspace settings cannot set it. |
pageSize |
A4 |
Page size: A4, Letter, Legal, Tabloid |
orientation |
auto |
Page orientation: auto, portrait, landscape |
margins |
{ top: 20mm, bottom: 20mm, left: 15mm, right: 15mm } |
Page margins (supports mm, cm, in, or px) |
fontSize |
14 |
Base font size in pixels |
diagramTheme |
ocean |
Mermaid diagram theme: ocean, forest, rose, slate, sunset |
keepDiagramStyles |
false |
Keep inline Mermaid style X fill:... directives instead of applying the theme uniformly |
wideDiagrams |
flip |
flip: redraw too-wide left-to-right flowcharts top-to-bottom. shrink: keep the direction and shrink to fit |
customCssPath |
— |
Path to a custom CSS file (absolute, or relative to workspace root) |
headerTemplate |
— |
HTML template for page headers (Puppeteer classes) |
footerTemplate |
Page numbers |
HTML template for page footers. Default: <span class="pageNumber"></span> / <span class="totalPages"></span> |
How It Works
- Markdown is parsed with markdown-it (HTML, linkify, typographer enabled), plus KaTeX math, heading anchors and
[[toc]]
- YAML front matter is stripped before rendering
- Code blocks are syntax-highlighted with highlight.js
```mermaid and ```excalidraw blocks are converted to renderable containers- The HTML is loaded in a headless Chrome instance via Puppeteer
- Mermaid and Excalidraw (bundled with the extension, no network needed) render diagrams in the browser
- Diagrams are auto-scaled to fit the page — wide flowcharts are redrawn vertically, near-fits are shrunk to avoid blank gaps, and very tall diagrams are split across pages
- Chrome prints to PDF with the configured page size, margins, and orientation, including a bookmark outline
Requirements
- Google Chrome or any Chromium-based browser (Edge, Brave, etc.)
- Auto-detected on macOS, Windows, and Linux — or set the path manually via
convertMdToPdf.chromePath
Contributing
Contributions, issues, and feature requests are welcome!
git clone https://github.com/tiveor/convert-md-to-pdf.git
cd convert-md-to-pdf
pnpm install
pnpm dev # watch mode with hot reload
# Press F5 in VS Code to launch the Extension Development Host
pnpm build # production build
pnpm package # create .vsix package
License
MIT © Alvaro Orellana
| |
