前回に続き、今回も hugo 0.28 で追加された機能について。
0.28 以前は、Pygments や highlight.jsを使ってシンタックスハイライトを適用する必要がありましたが、0.28 でデフォルトシンタックスハイライトとしてPygments機能を取り込んだ Chromaが採用され、hugo単体でシンタックスハイライトが可能になりました。
- Pygmentsは、Pythonで書かれたシンタックスハイライト適用ライブラリで、これを利用するには Pythonの環境構築が必要
- highlight.jsは、導入が簡単ですが、読み込む度に処理が走るのでパフォーマンスに影響する
- Chromaは、Pygmentsを参考に Go言語で書かれたシンタックスハイライト適用ライブラリ
というわけで、うちも右へ倣えで導入しました。
Chroma syntax highlighter を有効に
設定ファイル（config.toml）に以下を追加すると、Pygments機能が有効になり、シンタックスハイライトが適用されます。
pygmentsUseClasses = true
さらに以下を追加すると、言語タグの付いた github-markdownのコードブロック（```）でも同じくシンタックスハイライトが適用されます。
pygmentsCodefences = true
シンタックスハイライト適用部分の CSSを用意
下記コマンドで、ハイライト表示用のCSSを生成して、所定の位置にファイルを配置
hugo gen chromastyles --style 《選択スタイル名》 > syntax.css
CSSの指定
生成した CSSファイルを HTML の <head> 要素で指定
<link rel="stylesheet" href="/css/syntax.css">
markdownでの記法
シンタックスハイライトを適用するには、下記の shortcodeを使う。
※ markdown で shortcode をうまく表示できなかったので、このセクションは Gist の shortcode を利用して表示しています。
適用できる 《言語タグ》 は、ここで確認できます。
行番号を表示する場合、下記オプションを追加
特定行を強調したい場合、下記オプションを追加（スペースで区切り、ハイフンで範囲指定）
上で書いたように、pygmentsCodefences = trueオプションが付いていると、言語タグの付いた github-markdownのコードブロック（```）でも同じくシンタックスハイライトが適用されます。
行番号表示や特定行を強調しなければ、こっちの方が書き慣れてるので、普段はこっち使います。
以前の適用設定を削除
うちはこれまで highlight.jsを採用していたので、config.tomlから下記オプションを削除
highlightjs = "github"
あと、HTML要素に指定していた highlight.js の設定を削除
<!-- highlightjs -->
{{ with .Site.Params.highlightjs }}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/{{ . }}.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
{{ end }}
以上
コメント
コメントなどありましたら、GitHubのディスカッションへお願いします。（書き込みには、GitHubのアカウントが必要です）