TITLE: Pandoc CSS templates
DATE: 2018-08-20
AUTHOR: John L. Godlee
====================================================================
This is a showcase of different CSS templates which I have adapted
for use in Pandoc when converting from Markdown to HTML. Where
credit is due for the original css file I’ve included it in the CSS
file.
All the CSS templates and the raw html for inspection can be
downloaded from [here].
[here]:
https://johngodlee.github.io/files/pandoc_css/pandoc_css.zip
I normally use the templates in the following way to get a truly
standalone .html file, which I can then email if necessary, or
convert to a pdf using wkhtmltopdf:
style={style.css}
pandoc -f markdown -t html5 --css=$style --standalone -o output.html input.md
wkhtmltopdf output.html output.pdf
On to the templates:
blue_big
{IMAGE}
[[[blue_big screenshot]]]:
https://johngodlee.github.io/files/pandoc_css/test_blue_big.html
buttondown
{IMAGE}
[[[buttondown screenshot]]]:
https://johngodlee.github.io/files/pandoc_css/test_buttondown.html
chmduquesne_resume
{IMAGE}
[[[chmduquesne_resume screenshot]]]:
https://johngodlee.github.io/files/pandoc_css/test_chmduquesne_resume.html
github_pages
{IMAGE}
[[[github_pages screenshot]]]:
https://johngodlee.github.io/files/pandoc_css/test_github_pages.html
github
{IMAGE}
[[[github screenshot]]]:
https://johngodlee.github.io/files/pandoc_css/test_github.html
killercup
{IMAGE}
[[[killercup screenshot]]]:
https://johngodlee.github.io/files/pandoc_css/test_killercup.html
modest
{IMAGE}
[[[modest screenshot]]]:
https://johngodlee.github.io/files/pandoc_css/test_modest.html
panam
{IMAGE}
[[[panam screenshot]]]:
https://johngodlee.github.io/files/pandoc_css/test_panam.html
pandoc_tweak
{IMAGE}
[[[pandoc_tweak screenshot]]]:
https://johngodlee.github.io/files/pandoc_css/test_pandoc_tweak.html
pandoc
{IMAGE}
[[[pandoc screenshot]]]:
https://johngodlee.github.io/files/pandoc_css/test_pandoc.html
splendor
{IMAGE}
[[[splendor screenshot]]]:
https://johngodlee.github.io/files/pandoc_css/test_splendor.html
typewriter
{IMAGE}
[[[typewriter screenshot]]]:
https://johngodlee.github.io/files/pandoc_css/test_typewriter.html
Creating the images
For interest’s sake, this is the short bash script I used to loop
over the css files to make the screenshots seen above:
#!/bin/bash
for i in /Users/johngodlee/.pandoc/templates/css/*.css; do
name=$(echo ${i##*/})
filename=$(echo "$name" | cut -f 1 -d '.')
pandoc -f markdown -t html5 --css=$i -H $i --standalone -o "css_test_html/test_${filename}.html" test.md
done
Note that all of the .css files are wrapped in a
<style type="text/css"> ... </style>, which doesn’t make any
difference to the way the stylsheet functions, but meas that I can
use the -H flag in pandoc to add the stylesheet contents to the head
of the .html file, making it truly standalone.
The contents of test.md:
---
title: Lorem Ipsum
author: John Godlee
date: 2018-04-01
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ligula enim, commodo ut placerat vitae, cursus aliquam risus.
# Super header
Praesent accumsan tincidunt interdum. Sed nulla tortor, convallis in placerat quis, consectetur sit amet arcu. [THIS IS A LINK](
https://johngodlee.github.io) Etiam sit amet dui malesuada,
* List item 1
* List item 2
1. List item a
2. List item b
- - -
_Praesent accumsan_ __tincidunt interdum.__ Sed nulla tortor, convallis in placerat quis, consectetur sit amet arcu. Etiam sit amet dui malesuada, fermentum tortor finibus, tristique leo.
- - -
## Smaller header
> Fusce mattis `lacus commodo` orci rutrum, vel vestibulum dolor iaculis. Fusce et libero ligula. Proin non metus lorem. Duis `placerat lobortis` felis ac pretium.
>
> -- Pliny
```r
pdf("Regression_plot.pdf")
for (var in unique(Root$Plot_Date_Sample)) {
print( ggplot(Root[Root$Plot_Date_Sample==var,],
aes(x = Time, y = Cum_Root_Mass_g)) +
geom_point())
}
dev.off()
\`\`\`

Duis tempus consectetur accumsan. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse eget metus enim. Proin semper at velit a varius.