Hugoのシンタックスハイライト機能を使ってみました。Hugoの0.28以降では、デフォルトのシンタックスハイライターとしてChromaが取り込まれています。シンタックスハイライト機能を有効にしても高速でサイトを生成してくれます。

環境

  • Hugo 0.53

config.tomlにパラメータを追加

config.tomlに以下のパラメータを追加します。

pygmentsCodefences = true
pygmentsUseClasses = true

pygmentsCodefencesにtrueをセットするとSyntax Highlightingが有効になります。pygmentsCodefencesのみ有効にした状態では、preタグにstyle属性が追加されます。pygmentsUseClassesを有効にすると、次に作成するcssのスタイルを適用することができます。

cssファイルの作成

ターミナルで以下のコマンドを実行します。--styleオプションに指定するスタイルは、Pygments style gallery!から選ぶことができます。

hugo gen chromastyles --style=monokai > syntax.css

作成されたファイルは、staticフォルダ配下(例:staitc/css)に置き、headタグに作成したcssを追加します。

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

Markdownの記述方法

シンタックスハイライトしたい部分をバッククォートで囲み、言語名を記述します。対応している言語は、List of Chroma Highlighting Languagesにあります。

```toml
pygmentsCodefences = true
pygmentsUseClasses = true
```

参考サイト

Syntax Highlighting | Hugo