Pandoc で github 風 CSS を使った standalone な html を生成

pandoc

動機

ただ何となくふとやってみたいと思っただけです。

準備

  1. ~/.pandoc ディレクトリを作成
  2. github.css　で画像を参照している箇所を https://raw.githubusercontent.com/gollum/gollum/master/lib/gollum/public/gollum/images/para.png https://raw.githubusercontent.com/gollum/gollum/master/lib/gollum/public/gollum/images/dirty-shade.png に差し替え
  3. ~/.pandoc 直下に上記 CSS ファイルを配置

ここに改変済みの CSS を置いておきます。

実行例

pandoc 変換元ファイル.md -s --self-contained -t html5 -c github.css -o 生成される.html

ポイントは --self-contained です。CSS やスクリプト、画像ファイルを全て data: URI スキームを使って埋め込んでくれます。準備のステップ 2 をやっておかないと pandoc: Could not find data file hoge/fuga/../../images/modules/styleguide/para.png とか言われて怒られます。

パラメータがおおい

最良の方法が分かりませんでしたが、僕の場合には .zshrc に

pandoc_embed_html () {
    pandoc -s --self-contained -t html5 -c github.css $@
}

というのを追加して

pandoc_embed_html 変換元.md -o 出力先.html

という形で実行出来るようにしています。

参考