Markdown to PDF: convert notes and docs via HTML

Markdown is great for writing; PDF is great for sharing. The dependable route between them is HTML: convert your Markdown to HTML, style it for print, then convert the HTML to PDF. You get full control over the look without learning LaTeX.

Step 1: turn Markdown into HTML

Pick whichever tool you already have:

• Pandoc (free, command line). -s creates a complete HTML document:

  pandoc notes.md -s -o notes.html --metadata title="Project notes"

• Visual Studio Code. The built-in preview doesn’t export HTML on its own; an extension such as Markdown All in One adds a “print current document to HTML” command.
• JavaScript. Libraries such as marked or markdown-it convert a string in one call:

  import { marked } from "marked";
  const html = marked.parse(markdownText);

• GitHub. The rendered view of a README is HTML; for a public repository you can try pasting its URL into the converter’s Website URL tab, though converting your own exported HTML gives a cleaner page without GitHub’s navigation.

Step 2: add a print stylesheet

Raw Markdown output is unstyled. Wrap it in a document with a stylesheet like this one:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
  body { font-family: Georgia, serif; font-size: 11pt; line-height: 1.55; color: #1d1d1b; max-width: 170mm; margin: 0 auto; }
  h1, h2, h3 { font-family: Arial, Helvetica, sans-serif; line-height: 1.2; break-after: avoid; }
  h1 { font-size: 22pt; } h2 { font-size: 15pt; margin-top: 22pt; } h3 { font-size: 12pt; }
  p { orphans: 3; widows: 3; }
  a { color: #054d28; }
  code { font-family: Menlo, Consolas, monospace; font-size: 9pt; background: #f1f3ef; padding: 1px 4px; border-radius: 3px; }
  pre { background: #f1f3ef; padding: 10px 12px; border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; break-inside: avoid; }
  pre code { background: none; padding: 0; }
  blockquote { border-left: 3px solid #c9d6c0; margin-left: 0; padding-left: 12px; color: #555; }
  table { width: 100%; border-collapse: collapse; } th, td { border-bottom: 1px solid #ddd; padding: 5px 8px; text-align: left; }
  img { max-width: 100%; }
</style>
</head>
<body>
  <!-- paste the HTML from your Markdown converter here -->
</body>
</html>

With Pandoc you can apply a stylesheet directly. Use --embed-resources so it’s included in the file rather than linked:

pandoc notes.md -s --css print.css --embed-resources -o notes.html

Step 3: convert the HTML

Upload the HTML file or paste it into the converter, choose A4 or Letter, and download your PDF. Code blocks wrap instead of running off the page, and headings stay with the paragraph that follows.

Images in Markdown

Markdown often references images by relative path, such as ![Diagram](images/flow.png). Only the HTML is sent to the converter, so relative images won’t load. Either use full public image URLs or embed images: Pandoc’s --embed-resources option does this for you, as long as the result stays under 2 MiB. More in fonts and images in HTML to PDF.

Page breaks between chapters

Add a rule so each top-level heading starts a new page, skipping the first:

h1 { break-before: page; }
h1:first-of-type { break-before: auto; }