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 でハイライトしなくても良いので、サイトの表示速度が早そうです。

hugoで目次(tableOfContents)を表示する方法

hugoで目次(tableOfContents)を表示する方法

hugoのsummaryで出力される文字数を指定した値にする方法

hugoのsummaryで出力される文字数を指定した値にする方法

HUGOで必要最低限なサイトマップを作る

HUGOで必要最低限なサイトマップを作る

hugoで生成した静的ページをCircleCIでさくらのレンタルサーバへ自動アップ

hugoで生成した静的ページをCircleCIでさくらのレンタルサーバへ自動アップ

hugoのshuffleを使って記事の並び順をランダムにする方法

hugoのshuffleを使って記事の並び順をランダムにする方法

hugoのserverコマンドで使えるオプションをまとめた

hugoのserverコマンドで使えるオプションをまとめた

hugoのarchetypeを使って記事のテンプレート

hugoのarchetypeを使って記事のテンプレート

hugoのショートコードを使ってコードの掲載を効率化

hugoのショートコードを使ってコードの掲載を効率化

ubuntu 16.04 LTSに最新のhugoをインストールする方法

ubuntu 16.04 LTSに最新のhugoをインストールする方法