← All guides

How to print code with syntax highlighting (and why the colors disappear)

If you print source code and it comes out black and white with no highlighting, the code is not the problem, the print pipeline is stripping color to save ink. Browsers default to a "economy" color mode for printing that drops background colors and can flatten text colors. There are two fixes that have to work together: the document must declare print-color-adjust: exact on the code, and you must enable "Background graphics" in the print dialog. Miss either and the colors vanish. If you would rather not fight any of this, paste your code into PDFMoka's code to PDF tool, which sets the print CSS correctly and tells you which box to tick, so highlighting survives to the PDF.

Why the colors disappear (the actual cause)

When a browser renders for print (and "Save as PDF" counts as print), it does not just photograph the screen. By default it applies print-color-adjust: economy, a mode that lets the browser drop background images, remove dark backgrounds, and adjust text colors to stay legible on white paper and save toner. That is sensible for a news article. For a syntax-highlighted code block, where the highlighting is the point, it is exactly wrong: the colored token backgrounds and sometimes the token text colors get thrown away, and you get a gray wall of monospace.

Two independent things suppress your colors, which is why people often fix one and stay confused:

  1. The browser's default color mode (economy) can flatten colors unless the page overrides it.
  2. The print dialog's "Background graphics" toggle is off by default. Even a correctly authored page will print without background fills until the user turns this on.

Both have to be right. Understanding that it is two switches, not one, is what unsticks most people.

Fix 1: force the document to preserve colors

If you control the HTML/CSS (your own export, a static site, a rendered snippet), add print-color-adjust: exact to the code container inside a print media query. Include the WebKit-prefixed version for Chrome and Safari:

@media print {
  pre, code, .highlight {
    -webkit-print-color-adjust: exact; /* Chrome, Safari, Edge */
    print-color-adjust: exact;         /* Firefox, standard */
  }
}

exact tells the browser: these colors were chosen deliberately, do not optimize them away. Support is solid across current Chrome, Safari, Firefox (29+), and Edge (79+).

One trap worth knowing: a stylesheet that contains a blanket rule like @media print { * { color: black !important } } will kill highlighting no matter what else you do. Some Markdown-to-PDF tools ship exactly this rule. If your highlighting disappears even with everything below set correctly, search your print styles for a color: black override on *.

verify against your setup: print-color-adjust is standardized but was historically only available prefixed as -webkit-print-color-adjust; keep both lines. Behavior can still vary by browser and OS print driver, test your actual target browser before relying on it.

Fix 2: turn on "Background graphics" in the print dialog

This is the step people miss. Even a perfectly authored page needs the user to opt in:

  • Chrome / Edge: print dialog → More settings → check Background graphics.
  • Firefox: print dialog → More settings (or Page Setup) → check Print backgrounds (Firefox splits colors and images into separate options).
  • Safari: print dialog → check the Print backgrounds option.

verify against current version: browser print dialogs get redesigned periodically and the exact label/location of this toggle moves. Confirm where it lives in your browser version; the concept ("print background graphics/colors") is stable even when the wording is not.

Author's note that matters: the user's dialog choice can override the page. print-color-adjust: exact is a strong hint, but if the user (or a locked-down print driver) has disabled background graphics, that wins. So the reliable recipe is both: author with exact, and tell your reader to tick the box.

Dark theme vs light theme when printing

A dark editor theme (light text on near-black background) looks great on screen and often prints badly or wastes a lot of toner. Two sane options:

  • Print a light theme. Even if you code in a dark theme, render a light syntax theme for the printed/PDF version. Dark backgrounds are the thing browsers most aggressively strip, and full-page black is expensive to print.
  • If you truly want the dark look preserved, you need print-color-adjust: exact and Background graphics on, and accept the toner cost.

For most homework submissions, code reviews on paper, and documentation, a light theme with colored tokens prints cleanest.

The VS Code situation

VS Code has no built-in "print" for the editor; printing source is a long-standing gap people have worked around with extensions. Those extensions generally render your code to HTML and print that through a browser engine, which means they inherit the exact same two-switch problem above: several of them have well-known issues where output comes out black and white because of the print color mode or a color: black print rule. If you use one, the same fixes apply, check its print CSS and enable Background graphics.

If you just want a clean, highlighted PDF of a file or snippet without installing and configuring an extension, paste it into PDFMoka's code to PDF converter. It applies the correct print-color-adjust setup, picks print-friendly themes, and it runs in your browser so the code is never uploaded, which matters when the "code" is a config file or something with a secret in it. For rendering a whole Markdown document with embedded code blocks, use markdown to PDF instead.

Quick checklist

  1. Prefer a light syntax theme for print.
  2. Ensure the code container has print-color-adjust: exact (both prefixed and standard).
  3. Remove any blanket * { color: black } print rule.
  4. In the print dialog, enable Background graphics / Print backgrounds.
  5. Save as PDF and confirm the tokens kept their colors.

References