Pandoc HTML Template (Github Style)

create-custom-css.bash

#!/usr/bin/env bash

usage() {
    cat << HEREDOC 1>&2
Usage: create-custom-css.bash [OPTION]

  -d, --debug enable debug mode
  -h, --help  display this help and exit
HEREDOC
    exit 1
}

enable_debug() {
    set -o verbose
    set -o xtrace
    PS4='+(${BASH_SOURCE}:${LINENO}): ${FUNCNAME:+$FUNCNAME(): }'
}

die() {
    IFS=' ' printf "%s\n" "$*" 1>&2
    exit 1
}

requires() {
    type "$1" >/dev/null 2>&1 || die "command not found: $1"
}

create_custom_css() {
    # use GNU sed instead of BSD sed
    local editor
    if type gsed >/dev/null 2>&1; then
        editor=gsed
    else
        editor=sed
    fi

    local github_css=github.css
    curl -sL https://gist.github.com/andyferra/2554919/raw/10ce87fe71b23216e3075d5648b8b9e56f7758e1/github.css -o $github_css

    local dirty_shade_png=dirty-shade.png
    local dirty_shade_data_uri
    curl -sL https://github.com/gollum/gollum/raw/master/lib/gollum/public/gollum/images/dirty-shade.png -o $dirty_shade_png
    dirty_shade_data_uri="data:image/png;base64,"$(openssl base64 < $dirty_shade_png | tr -d '\n')

    $editor -i "s#\"../../images/modules/pulls/dirty-shade.png\"#${dirty_shade_data_uri}#" $github_css

    local para_png=para.png
    local para_data_uri
    curl -sL https://github.com/gollum/gollum/raw/master/lib/gollum/public/gollum/images/para.png -o $para_png
    para_data_uri="data:image/png;base64,"$(openssl base64 < $para_png | tr -d '\n')

    $editor -i "s#\"../../images/modules/styleguide/para.png\"#${para_data_uri}#" $github_css
}

while (($#)); do
    case $1 in
        -h|--help) usage ;;
        -d|--debug) enable_debug ;;
    esac
    shift
done

requires openssl
create_custom_css

template-github.html

This HTML is embedded with andyferra's css, para.png and dirty-shade.png.

You can use like this:

% pandoc input.md -s -t html5 --template=template-github.html -o output.html

Hi @miy4,

I would like to use this Pandoc template for a repo I've created:

https://github.com/tajmone/purebasic-archives

I seek permission to include this template, modify it and share it in the above linked repo. I will add due credits and links.

best regards,

Tristano

@tajmone
This template is evil. It contains andyferra's and gollum project's materials, but I published this without their permission.
You'll have to consider seeking their permission, not mine.

You can do same things as follows:

% curl -L https://gist.github.com/andyferra/2554919/raw/10ce87fe71b23216e3075d5648b8b9e56f7758e1/github.css -o github.css

% curl -L https://github.com/gollum/gollum/raw/master/lib/gollum/public/gollum/images/dirty-shade.png -o dirty-shade.png
% dirty_shade_data_uri="data:image/png;base64,"$(openssl base64 < dirty-shade.png | tr -d '\n')
% sed -i "s#\"../../images/modules/pulls/dirty-shade.png\"#${dirty_shade_data_uri}#" github.css

% curl -L https://github.com/gollum/gollum/raw/master/lib/gollum/public/gollum/images/para.png -o para.png
% para_data_uri="data:image/png;base64,"$(openssl base64 < para.png | tr -d '\n')
% sed -i "s#\"../../images/modules/styleguide/para.png\"#${para_data_uri}#" github.css

% pandoc -s input.md -t html5 -c github.css --self-contained -o output.html

I'll remove or replace this gist asap.
Sorry for not replying sooner and your inconvenience 😿

Quick fix: add Pandoc custom CSS generation script and remove Pandoc template

Thanks for the tips @miy4!

In the meantime I've created a GitHub-like template for pandoc, under MIT License:

• https://github.com/tajmone/pandoc-goodies/tree/master/templates/html5/github
• Live Preview

Hope you might find it useful.