5000164 is here
2017-08-14

Hugo でシンタックスハイライトを使う

結論

1
2
3
4
5
pygmentscodefences = true
pygmentsCodeFencesGuessSyntax = true
pygmentsStyle = "monokai"
pygmentsUseClasses = true
pygmentsoptions = "linenos=inline"

背景

コードを見やすくしたいからシンタックスハイライトを使おうと思った。
やってみたら思ったよりもできなかった。
なんか疲れたのでメモ。

手順

Pygments をインストールする

シンタックスハイライトするのに必要なやつ。
何も考えずに入れる。

1
sudo easy_install Pygments

シンタックスハイライト用の css を生成する

カラーコードを直接埋め込む方法もあるけど、クラスで指定した方がかっこいいと思ったのでクラスで指定する。
クラスで指定する場合は css を事前に生成しておいて読むこんでおく必要がある。
下記のコマンドで css を生成する。
デフォルトで用意されていないカラースキーマの使い方がわからなかったので今回は monokai を使う。

1
pygmentize -f html -S monokai -a .highlight > monokai.css

生成した css をテーマで読み込む

テーマの static ディレクトリに css を置いて header で読み込む。

シンタックスハイライトを使うように設定する

config.toml に下記の設定を追加。
pygmentscodefences の設定が公式ドキュメントに見つからなくて罠だった。
これを true にしないとバッククオート 3 つでシンタックスハイライトを有効にする機能が動かない。
pygmentsoptions は Pygments のオプションを指定するところで、ここで見た目を変えたりできる。

1
2
3
4
5
pygmentscodefences = true
pygmentsCodeFencesGuessSyntax = true
pygmentsStyle = "monokai"
pygmentsUseClasses = true
pygmentsoptions = "linenos=inline"

感想

スッとできると思ったら意外とひっかかって疲れた。
でも終わってみれば簡単っぽい。

参考