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

2018.1.20 追記

バージョン 0.28 から導入された Chroma で何も考えず簡単にシンタックスハイライトが使えるようになった。

結論

  • シンタックスハイライト用の css をテーマで読み込んでおく
  • config.toml に下記の設定を追加
pygmentscodefences = true
pygmentsCodeFencesGuessSyntax = true
pygmentsStyle = "monokai"
pygmentsUseClasses = true
pygmentsoptions = "linenos=inline"

背景

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

手順

Pygments をインストールする

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

sudo easy_install Pygments

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

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

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

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

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

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

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

pygmentscodefences = true
pygmentsCodeFencesGuessSyntax = true
pygmentsStyle = "monokai"
pygmentsUseClasses = true
pygmentsoptions = "linenos=inline"

感想

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

参考

Author
菅原 浩
Web プログラマー。好きな言葉は「安定的に不安定」。オーストラリアで英語を勉強した後に、現在デンマークで幸せについて考えている。
Next Post
AWS Lambda の Python 3.6 で LINE Bot を動かす
Previous Post
Jekyll の記事と WordPress の記事を Hugo にインポートする
Recent Posts
Electron と Scala.js と scalajs-react と ScalaCSS を使ってアプリを作った時のログ
Scala で Flyway と Slick を使って codegen した時のログ
自分とは連続した情報であると定義する
本「リモートチームでうまくいく」の感想
映画「Whiplash」の感想