pandocでmarkdownからgithub風シンタックスハイライトされたhtml生成（ついでに数式）

再びpandocとmarkdownネタ。 前回はこちら

markdownからhtml生成できてすごい！となったんですが、 見栄え的にはGithub風になっていると落ち着くということで出来ないかどうか調べたところ出来そうだったので方法をメモ

github.css

github風のCSSを公開してくださっている方がいるので、ダウンロード Github Markdown CSS - for Markdown Editor Preview

テンプレートを作成

  1. C:\Users<ユーザ名>\AppData\Roaming\cabal\pandoc-1.11.1\data\templates
    のdefault.html5をコピーしてgithub.htmlなどの適当な名前にする。

  2. headタグの中の適当なところにgithub.cssの中身をコピー

markdownからhtmlを生成

> pandoc -s --template=github.html test.md -o test.html

結果

通常

f:id:matsu_chara:20131023021308j:plain

Github風

f:id:matsu_chara:20131023021315j:plain

ちなみに

> pandoc -s -t html5 -c github.css test.md -o test.html

でも可能です。 cssファイルが埋め込みにならないんですが、それでもOKならこっちの方が楽です。

ついでに数式

公式のデモPandoc - Demos通りにmath系の好きなオプションを以下から選んでつければOK。 mathjaxの場合は-sをつけても完全なstandaloneにはならないそうです。(サーバとの通信が必要)

> pandoc math.text -s -o mathDefault.html
> pandoc math.text -s --mathml -o mathMathML.html
> pandoc math.text -s --webtex -o mathWebTeX.html
> pandoc math.text -s --mathjax -o mathMathJax.html
> pandoc math.text -s --latexmathml -o mathLaTeXMathML.html