Exporting Markdown to PDF and HTML Cleanly: Print CSS and Code Highlighting
Discover how to export clean, professional PDF reports from Markdown. Master CSS @media print rules, page-break controls, and syntax highlighting.
Exporting Markdown to PDF frequently results in clipped tables, orphan headings, and code blocks split across page breaks. Resolve these issues using CSS @media print rules with break-inside: avoid, custom @page margins, and clean typography styling before calling window.print().
Solve this problem now with our free Markdown Previewer & Editor
Try it instantly in your browser — zero tracking, 100% client-side privacy.
Specification & Architecture Reference
| Print Problem | CSS Property Solution | Expected Outcome |
|---|---|---|
| Code block severed across pages | pre, blockquote { break-inside: avoid; } | Moves entire code block to top of next page cleanly |
| Orphan heading at bottom of page | h1, h2, h3 { break-after: avoid; } | Guarantees headings stay anchored with their paragraphs |
| Unwanted browser URLs in print | @page { margin: 1.5cm; } | Removes browser header/footer timestamps and URL paths |
| Black ink background waste | @media print { body { background: #fff; } } | Forces background to clean white, saving printer toner |
The Challenge of Exporting Markdown to Print
Markdown is designed for flexible screen layouts, while PDF is a fixed, paginated format. Converting markdown to PDF via standard browser printing often produces common layout defects: - A heading appears on the final line of Page 1 while its body text starts on Page 2. - A 10-line code snippet is awkwardly sliced across page boundaries. - Dark mode interfaces consume excessive printer toner.
The Essential Print Stylesheet Apply these `@media print` rules to your markdown container:
@media print {
/* Force clean white background and crisp dark text */
body, .markdown-body {
background: #ffffff !important;
color: #111827 !important;
font-size: 11pt;
line-height: 1.5;/* Prevent page breaks inside critical elements */ pre, code, blockquote, table, figure { break-inside: avoid; page-break-inside: avoid; }
/* Keep headings with their following content */ h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
/* Configure physical paper margins */ @page { size: A4; margin: 20mm 15mm 20mm 15mm; }
/* Hide interactive UI elements from the printout */ header, nav, button, .no-print { display: none !important; } } ```
Triggering Client-Side PDF Export With print styles defined, exporting to PDF requires a simple JavaScript call:
function exportToPdf() {
window.print();
}
```Draft, format, and preview your documents in real time with Mickytool's **Markdown Previewer & Editor**.
Solve this problem now with our free Markdown Previewer & Editor
Execute this workflow immediately without saving data on remote servers.
Frequently Asked Questions
Can I generate PDFs on a Node.js server without a browser?
Yes, using headless browser tools like Puppeteer or Playwright via page.pdf({ format: 'A4', printBackground: true }).
How do I insert a manual page break in Markdown?
Insert an empty HTML div with a page-break style: <div style='page-break-after: always;'></div>.