Markdown Styler & PDF Exporter
A VS Code extension to preview Markdown files with customizable CSS styles, render Mermaid diagrams, and export to PDF.
Features
- Live Preview - Render Markdown in a side panel with real-time updates
- CSS Styling - Customize fonts, colors, heading scale, code themes, and more via GUI controls
- Raw CSS Editor - Write custom CSS rules directly for full control
- Style Profiles - Save, load, and delete named style profiles
- Mermaid Diagrams - Render flowcharts, sequence diagrams, class diagrams, C4 diagrams, and more
- PDF Export - Export to a single continuous-scroll PDF with lateral margins, or paginated PDF with headers/footers
Usage
Open Preview
- Open any
.md file
- Click the preview icon in the editor title bar, or run Markdown Styler: Open Preview from the Command Palette (
Ctrl+Shift+P)
Customize Styles
- In the preview panel, click CSS Styles to open the style panel
- Use the GUI controls to adjust fonts, colors, and layout
- Or expand the Raw CSS Editor to write custom CSS
Save & Load Style Profiles
- Save: Command Palette > Markdown Styler: Save Style Profile
- Load: Command Palette > Markdown Styler: Load Style Profile
- Delete: Command Palette > Markdown Styler: Delete Style Profile
Export to PDF
- Click the Export PDF button in the preview toolbar
- Or run Markdown Styler: Export to PDF from the Command Palette
- Choose where to save the PDF file
PDF Configuration
Configure PDF export via VS Code settings (markdownStyler.pdf.*):
| Setting |
Default |
Description |
format |
A4 |
Page format: A4 or Letter |
landscape |
false |
Landscape orientation |
marginTop |
20mm |
Top margin |
marginBottom |
20mm |
Bottom margin |
marginLeft |
15mm |
Left margin |
marginRight |
15mm |
Right margin |
continuous |
true |
Single-page continuous PDF (vs paginated) |
printBackground |
true |
Include background colors/images |
displayHeaderFooter |
false |
Show header/footer in paginated mode |
headerTemplate |
"" |
Header HTML template |
footerTemplate |
"page/total" |
Footer HTML template |
Mermaid Support
Mermaid diagrams are rendered automatically. Use fenced code blocks with the mermaid language identifier:
```mermaid
graph TD
A[Start] --> B[End]
```
Supported diagram types: flowchart, sequence, class, state, ER, Gantt, pie, C4, and more.
Requirements
- VS Code >= 1.80.0
- Puppeteer is required for PDF export. It is included as a dependency and will be installed automatically.
Extension Settings
markdownStyler.defaultStyles - Default CSS styles objectmarkdownStyler.pdf.* - PDF export configuration (see table above)
Known Issues
- Very large documents with many Mermaid diagrams may take longer to export to PDF
- The Mermaid render timeout is 15 seconds per document
Release Notes
1.0.0
- Initial release
- Live Markdown preview with customizable CSS
- Mermaid diagram rendering
- PDF export (continuous and paginated modes)
- Style profiles (save/load/delete)
| |
