コードブロック中のコードをハイライト表示

プログラムをブログに載せる時Markdownのコードブロックを使ってるんですけど、 変数とか文字列とかがハイライトされず何か見にくいなと思ってました。 ハイライトbefore 色分けをする方法を調べてみるとPelicanのテーマを弄れば可能になるようです。 というわけでテーマの魔改造開始。

PelicanのFAQにPygmentを使ったハイライトの適用方法が書いてあったので参考にしました。 PygmentsはPythonで書かれたシンタックスハイライトをコードブロックに適用させるためのライブラリです。 インストールはpipを使って

pip install Pygments

インストールが完了するとcssを外部出力させるためのコマンドpygmentizeが使えるようになります。 このコマンドを使ってハイライト用の設定ファイルを生成します。 Pygmentsは様々なハイライトの色が異なるテーマを用意しているのでDemoページから好きな配色のテーマを見つけてください。 僕はperldocが気に入ったのでこの配色テーマを使いました。

perldocのcssを適切な場所で生成します。

cd path/to/theme/static/css/
pygmentize -S perldoc -f html -a .highlight > pygment.css

テーマのbase.htmlにcssを読み込ませればpelican content実行時にハイライトが適用されるようになります。

cd path/to/theme/template/

base.htmlで

<link rel="stylesheet" href="{{ SITEURL }}/theme/css/pygment.css" type="text/css" media="all">

適用後がこちら。見やすくなったかと思います。

ハイライトafter