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

2020.1.10

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

まずは、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.cssthemes\mokuzine\layouts\_default\single.htmlで読み込ませれば、コードがハイライトされるようになります。

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

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

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

次のようになります。

echo "hello world"

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

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

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

Related.