Markdown to PDF

When Markdown needs to become a PDF

Markdown is the format you write in. PDF is the format you hand someone who is not going to open a text editor: a client, a printer, a reviewer who wants a page they can annotate, an archive that still looks the same in ten years. This converter sits in that gap. Paste a README, a meeting note, a one-pager, or a homework handout, and download a PDF of the rendered page.

Typical jobs: turning a GitHub README into something you can attach to an email, freezing a spec so a later edit cannot silently change what was agreed, printing lecture notes without dragging a browser print dialog through the rest of the site chrome, or exporting a Markdown draft that a CMS will never see.

The conversion never leaves your browser

Showdown turns the Markdown into HTML in this tab, MathJax typesets the math and Mermaid draws the diagrams. html2canvas snapshots the rendered page, and jsPDF wraps that snapshot into a downloadable file. Nothing is uploaded, so unpublished drafts, internal runbooks, and notes with names in them stay on your machine.

The same pipeline is why the preview matches the PDF: both render the HTML fragment with the same stylesheet. If a table, task list, or fenced block looks right in the preview pane, that is what the file will contain.

What GitHub Flavored Markdown adds

With GFM on, the converter understands the extensions most people now assume are Markdown: pipe tables, task lists with - [ ] and - [x], strikethrough with ~~text~~, fenced code blocks with a language hint, and bare URLs that turn into links. Turn it off only if the source is strict CommonMark and you want to see what a conservative renderer would drop.

| Tool | Runs in |
|:-----|--------:|
| Diff | browser |

- [x] Write
- [ ] Publish

A two-column table with left-aligned "Tool" and right-aligned "Runs in", then a task list with Write checked and Publish empty.

Mermaid diagrams and LaTeX math

A fenced code block tagged mermaid is not printed as code. It is handed to Mermaid and drawn as a diagram: flowcharts, sequence diagrams, class and state diagrams, Gantt charts, pie charts, whatever the current Mermaid release understands. The SVG is embedded in the preview and captured into the PDF at the width of the page. If the source does not parse, the block stays as code with the parser message above it, so a typo never silently drops a figure.

Math follows the pandoc conventions. $E = mc^2$ is inline, $$ ... $$ on its own lines is a centred display equation, and both are typeset with MathJax as SVG, so the PDF carries real glyph outlines rather than a font the viewer may lack. A dollar sign followed by a space or a digit is treated as money, so $5 and $10 stays prose, and \$ is a literal dollar. Anything inside backticks or a fenced block is left alone. Unknown commands are shown in red rather than failing the whole document.

```mermaid
flowchart LR
  A[Write] --> B[Preview] --> C[PDF]
```

Inline $E = mc^2$ and

$$
\int_0^1 x^2 \, dx = \frac{1}{3}
$$

A three-box left-to-right flowchart, a sentence with E = mc² set as a formula, then a centred integral with a proper fraction.

Page size and orientation

A4 (210 × 297 mm) is the default, matching most of the world. Switch to Letter (8.5 × 11 in) for US printers and many office templates. Portrait is the usual reading layout; landscape is the better fit for wide tables and code samples that wrap badly on a narrow page. The footer of the preview pane shows the filename plus the size and orientation that will be used, so there is no surprise at download time.

Margins are a fixed 12 mm on every side. That is enough for most desktop printers and for a hole punch, without shrinking the type. There is no header or footer chrome: the PDF is the document, not a screenshot of this website.

Filename, headings, and the preview

The download is named from your first ATX heading. A source that starts with # Shipping docs for LLMs becomes shipping-docs-for-llms.pdf. Emphasis markers are stripped, accented letters are folded to ASCII, and the slug is capped so the name stays usable on Windows shares. No heading at all falls back to document.pdf.

The preview lives in a sandboxed iframe, so a stray <script> in the Markdown cannot run on this page. It is a live view of the same HTML the PDF will capture, not a separate renderer, which is why toggling GFM updates both at once.

Images, code, and long documents

Linked images are included when the browser can load them. That works for same-origin files and for hosts that send CORS headers. A hot-linked image from a site that blocks canvas reads will show in the preview (the iframe is allowed to display it) but may come out blank in the PDF. If a picture is load-bearing, host it somewhere that allows cross-origin reads, or paste a data URL.

Fenced code is wrapped so long lines do not overflow the page. Very long documents are split across pages by slicing the captured image; a heading or a line of code can land on the join. For a 30-page manuscript that is a reason to use a dedicated typesetter. For a README, a changelog, or a two-page brief, it is rarely visible.

Tips for common sources

• README files: keep GFM on so tables and task lists survive. The first # heading becomes the filename, which is usually what you want.
• Wide tables: switch to landscape before you download, rather than shrinking the type. The Markdown table generator will pad columns so the source stays readable if you need to edit them first.
• Need the HTML instead of a file? Use the Markdown to HTML tool, same Showdown pipeline, copy or download a .html file.
• Coming from a web page rather than Markdown? Run it through HTML to Markdown to strip the chrome, then back through this tool to get a clean PDF.