Hugoブログのシンタックスハイライトを変更・カスタマイズする
Hugoのシンタックスハイライトを変更・カスタマイズする方法をメモします。
シンタックスハイライトの変更
Hugoのシンタックスハイライトは、Chromaというライブラリを使っています。Chromaは、Go言語で書かれたシンタックスハイライターです。
Hugoのシンタックスハイライトのスタイルは、config.yamlのmarkup > highlight > styleで指定できます。
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で指定できるので、必要に応じて変更可能です。
