Pandoc

no hurry, no pause.

2024-04-09

How to use a template and an external css file (i.e. no inline css in the generated html output) to reduce html output file size.

Pandoc Command

Following command generates a standalone html file based on template.html

pandoc --standalone --template template.html input.md -o output.html

pandoc --standalone --template template.html --bibliography refs.bib --citeproc --csl apa.csl 2024-04-09-pandoc.md -o output.html

Run the above code from terminal.

Create an HTML Template

What follows is based on the default html5 template from Pandoc’s GitHub source. I’ve added <link rel="stylesheet" href="pandoc.css" /> and removed lines that insert in-line css code and other lines that unnecessarily increase output html file size.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="$lang$" xml:lang="$lang$"$if(dir)$ dir="$dir$"$endif$>

<head>

  <meta charset="utf-8" />

  <meta name="generator" content="pandoc" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

  <link rel="stylesheet" href="pandoc.css" />

$for(author-meta)$

  <meta name="author" content="$author-meta$" />

$endfor$

$if(date-meta)$

  <meta name="dcterms.date" content="$date-meta$" />

$endif$

$if(keywords)$

  <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$" />

$endif$

$if(description-meta)$

  <meta name="description" content="$description-meta$" />

$endif$

  <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>

</head>

<body>

$for(include-before)$

$include-before$

$endfor$

$if(title)$

<header id="title-block-header">

<h1 class="title">$title$</h1>

$if(subtitle)$

<p class="subtitle">$subtitle$</p>

$endif$

$for(author)$

<p class="author">$author$</p>

$endfor$

$if(date)$

<p class="date">$date$</p>

$endif$

$if(abstract)$

<div class="abstract">

<div class="abstract-title">$abstract-title$</div>

$abstract$

</div>

$endif$

</header>

$endif$

$if(toc)$

<nav id="$idprefix$TOC" role="doc-toc">

$if(toc-title)$

<h2 id="$idprefix$toc-title">$toc-title$</h2>

$endif$

$table-of-contents$

</nav>

$endif$

$body$

$for(include-after)$

$include-after$

$endfor$

</body>

</html>

Create a CSS File

This is an external css file that will not be included in the generated html output as in-line code, instead it will be linked to. This method reduces the html output file size. The html template contains the following line <link rel="stylesheet" href="pandoc.css" />

The pandoc.css file is the following:

html {

font-family: Palatino, Georgia, serif;

font-size: 18px;

line-height: 1.6;

color: #1a1a1a;

background-color: rgb(255, 255, 248);

}

body {

margin: 0 auto;

max-width: 36em;

padding-left: 50px;

padding-right: 50px;

padding-top: 50px;

padding-bottom: 50px;

hyphens: auto;

overflow-wrap: break-word;

text-rendering: optimizeLegibility;

font-kerning: normal;

}

@media (max-width: 600px) {

body {

font-size: 0.9em;

padding: 12px;

}

h1 {

font-size: 1.8em;

}

}

@media print {

html {

background-color: rgb(255, 255, 248);

}

body {

background-color: transparent;

color: black;

font-size: 12pt;

}

p, h2, h3 {

orphans: 3;

widows: 3;

}

h2, h3, h4 {

page-break-after: avoid;

}

}

p {

margin: 1em 0;

}

a {

color: #1a1a1a;

}

a:visited {

color: #1a1a1a;

}

img {

max-width: 100%;

}

h1, h2, h3, h4, h5, h6 {

margin-top: 1.4em;

}

h5, h6 {

font-size: 1em;

font-style: italic;

}

h6 {

font-weight: normal;

}

ol, ul {

padding-left: 1.7em;

margin-top: 1em;

}

li > ol, li > ul {

margin-top: 0;

}

blockquote {

margin: 1em 0 1em 1.7em;

padding-left: 1em;

border-left: 2px solid #e6e6e6;

color: #606060;

}

code {

font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;

font-size: 85%;

margin: 0;

hyphens: manual;

}

pre {

margin: 1em 0;

overflow: auto;

}

pre code {

padding: 0;

overflow: visible;

overflow-wrap: normal;

}

.sourceCode {

background-color: transparent;

overflow: visible;

}

hr {

background-color: #1a1a1a;

border: none;

height: 1px;

margin: 1em 0;

}

table {

margin: 1em 0;

border-collapse: collapse;

width: 100%;

overflow-x: auto;

display: block;

font-variant-numeric: lining-nums tabular-nums;

}

table caption {

margin-bottom: 0.75em;

}

tbody {

margin-top: 0.5em;

border-top: 1px solid #1a1a1a;

border-bottom: 1px solid #1a1a1a;

}

th {

border-top: 1px solid #1a1a1a;

padding: 0.25em 0.5em 0.25em 0.5em;

}

td {

padding: 0.125em 0.5em 0.25em 0.5em;

}

header {

margin-bottom: 4em;

text-align: center;

}

#TOC li {

list-style: none;

}

#TOC ul {

padding-left: 1.3em;

}

#TOC > ul {

padding-left: 0;

}

#TOC a:not(:hover) {

text-decoration: none;

}

code{white-space: pre-wrap;}

span.smallcaps{font-variant: small-caps;}

div.columns{display: flex; gap: min(4vw, 1.5em);}

div.column{flex: auto; overflow-x: auto;}

div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}

ul.task-list{list-style: none;}

ul.task-list li input[type="checkbox"] {

width: 0.8em;

margin: 0 0.8em 0.2em -1.6em;

vertical-align: middle;

}

  

#footer {

        padding-top: 1em;

        font-size: 90%;

        color: gray;

        text-align: center;

        }