Tune the print layout: hide nav/footer, force black-on-white text, expand absolute URLs, hide images you don't want printed. Save your users from wasting paper on the page chrome.
HTML
<head>
<!-- A separate stylesheet, only loaded for print -->
<link rel="stylesheet" href="/print.css" media="print">
<!-- ...or inline the print rules in your main CSS -->
<style>
@media print {
/* Hide things that don't belong on paper */
nav, footer, .site-header, .ad-slot, .comments, .cookie-banner { display: none !important; }
/* Force readable contrast */
body { color: black; background: white; }
a { color: black; text-decoration: underline; }
/* Expand link URLs after the anchor text */
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
/* Don't print absolute or javascript links */
a[href^="#"]::after,
a[href^="javascript:"]::after { content: ""; }
/* Reduce page margins; let the browser handle the rest */
@page { margin: 1.5cm; }
/* Don't break inside headings, tables, code blocks */
h1, h2, h3, table, pre, figure { page-break-inside: avoid; }
/* Make sure backgrounds in code blocks render */
pre { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
</style>
</head>Save your own code snippets
Create a free account and build your private vault. Share publicly whenever you want.