Hugoブログのシンタックスハイライトを変更・カスタマイズする

Hugoのシンタックスハイライトを変更・カスタマイズする方法をメモします。

シンタックスハイライトの変更

Hugoのシンタックスハイライトは、Chromaというライブラリを使っています。Chromaは、Go言語で書かれたシンタックスハイライターです。

Hugoのシンタックスハイライトのスタイルは、config.yamlのmarkup > highlight > styleで指定できます。

1markup:
2  highlight:
3    style: native

Chromaのスタイルは、ChromaのGitHubリポジトリにあるstylesディレクトリにあるものを指定します。

見本がこちらのページにあります: Chromaのスタイル一覧

その他のカスタマイズ

その他の細かいカスタマイズは、config.yamlのmarkup > highlightで指定できます(参考)。下記はHugoのデフォルトの設定です。

 1markup:
 2  highlight:
 3    anchorLineNos: false        # 行番号をONにしていた場合に、行番号にアンカーを付ける。
 4    codeFences: true            # バッククォートで囲まれたコードブロックをシンタックスハイライトする。
 5    guessSyntax: false          # 言語を指定していない場合に、自動で言語を推測する。
 6    hl_Lines: ""                # 指定した行にハイライトを付ける。
 7    hl_inline: false            # <code>で指定したインラインコードにハイライトを付ける。
 8    lineAnchors: ""             # 複数行のラインにアンカーを付ける。
 9    lineNoStart: 1              # 行番号の開始番号。
10    lineNos: false              # 行番号の表示ON/OFF切り替え。
11    lineNumbersInTable: true    # テーブル内の行番号の表示ON/OFF切り替え。
12    noClasses: true             # シンタックスハイライトのCSSクラスを付けない。
13    noHl: false                 # 用途不明
14    style: monokai
15    tabWidth: 4                 # タブの幅。

シンタックスハイライトを無効にする場合はcodeFencesをfalseにします。

noClassesをfalseにすると、chromaというCSSクラスが<pre>要素に付与されます。独自にcssファイルを用意して、自分の好きなようにスタイルを変更する際に利用するようです。

noHlは用途が不明です。開発者もよくわかっておらず、Pygmentsから取り急ぎ持ってきた仕様のようです。

I must admit that I don’t know what noHl was meant to mean. I suspect it was something we dragged over from Pygments. GitHubのissueのコメント

まとめ

Hugoのシンタックスハイライトを変更・カスタマイズする方法をメモしました。Chromaのスタイルを変更することで、ブログの見た目を変えることができます。

また、その他のカスタマイズもconfig.yamlで指定できるので、必要に応じて変更可能です。