Hugoのシンタックスハイライトをmonokai以外に

SSG
Page content

このページについて

自分用（このページ）のカスタマイズ用のメモ。 Syntax highlightの配色、だいたいmonokaiを設定する事例のsampleばかりなので、それ以外、何が使えるのか調べて設定してみた。

他の配色は何があるのか

chromaというライブラリを使っており、次のページでchromaで使えるスタイルを確認することができる。

Chroma Style Gallery (xyproto.github.io)

image-20240911101950934

またHugoのsyntax highlightで対応している言語リストはこちら。

Syntax highlighting | Hugo (gohugo.io)

実際に設定してみる

なんとなく既視感のある”native” styleを設定してみる。

hugo gen chromastyles --style=native > static/css/syntax.css

hugoのルートで上記を実行。syntax.cssにnativeのためのCSSが生成される。

hugo/layout/_default/partials/header.html

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

partitalsのheader.html（テーマによってはファイル名等が変わる場合もあり。上記はmainroad利用時）は、ヘッダ部のテンプレのため、上記で作成したcssを読み込むように追加記述する。

hugo/hugo.toml

[markup]
  [markup.highlight]
    noClasses = false
    style = "native"
    codeFences = true
    guessSyntax = true
  • noclassesをfalseにするとCSSクラスによるハイライトを指定
  • styleで実際のstyle名を指定
  • codefencesは```で区切られた範囲をハイライトする
  • guessSyntaxは言語指定しない場合の自動判定機能のON

関連記事