hugoのコードブロックをハイライトする方法

技術系ブログのように記載したコードに色を付けたい人向けに書いています。

まずは、config.tomlを開き次のような設定を追加します。

[markup]
  [markup.highlight]
    codeFences = true
    guessSyntax = false
    hl_Lines = ""
    lineNoStart = 1
    lineNos = false
    lineNumbersInTable = true
    noClasses = true
    style = "monokai"
    tabWidth = 4

次にハイライト用の CSS を生成します。

hugoコマンドを使って出力できます。

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

生成されたsyntax.cssをthemes\mokuzine\layouts\_default\single.htmlで読み込ませれば、コードがハイライトされるようになります。

この記事に掲載しているコードは実際ハイライトされるようにしていますので、色がついているはずです。

連続するバッククオートのあとに言語を指定すると、指定されたカラーリングが行われます。

    ```bash
    echo "hello world"
    ```

次のようになります。

echo "hello world"

公式サイトにもシンタックスハイライトのやり方が書いていますので見てみてください。

https://gohugo.io/content-management/syntax-highlighting/

この方法を使えば、javascript でハイライトしなくても良いので、サイトの表示速度が早そうです。

関連記事