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

動機

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

準備

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

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

参考

• Tip: using Pandoc to create truly standalone HTML files | A Labourer at the Bitface
• Pandoc ユーザーズガイド 日本語版 - Japanese Pandoc User's Association
• [pandocでmarkdownからgithub風シンタックスハイライトされたhtml生成（ついでに数式） - だいたいよくわからないログ( ´_ゝ)](http://matsu-chara.hatenablog.com/entry/2013/11/17/114859 "pandocでmarkdownからgithub風シンタックスハイライトされたhtml生成（ついでに数式） - だいたいよくわからないログ( ´_ゝ)")
• Pandocメモ - jou4のブログ