HugoでシンタックスハイライトCSSを利用したい

2022/07/22

デフォルトだとhugoのMarkdownのコードブロックには、シンタックスハイライト用のstyleが直接埋め込まれる。

styleではなくclass名の埋め込みに変更し、cssによりハイライトの表示を変更可能にしたい。

hugoには、Chromaというシンタックスハイライター用のCSSを生成する機能がある。

以下の手順で生成したCSSを利用できる。

サイト のconfig.tomlで以下の設定を追加し、style埋め込み → class名埋め込み方式に変更する。(テーマ のconfig.tomlでは反映されません。)
```
[markup.highlight]
  noClasses = false
```

Chroma Style Galleryを参考に好みのCSSファイルを生成

cd ${themeのフォルダ}
mkdir -p static/css
hugo gen chromastyles --style=solarized-dark > static/css/syntax.css

生成したCSSファイルをヘッド(layouts/partials/head.html)で読み込む

{{/*  略  */}}
<link rel="stylesheet" href="{{ "css/syntax.css" | relURL }}">
{{/*  略  */}}

作成日: 2022/07/22