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関連記事










これからブログなどのサイトを作りたいと思っている人は、お名前.comでのドメイン取得がオススメです。

■□━━ 急げ、ドメインは早い者勝ち! ━━□■
     ■お名前.com

アマゾンの2019年本屋大賞一覧

そして、バトンは渡された
ひと
ベルリンは晴れているか
熱帯
ある男

楽天市場のおすすめ商品一覧

お金2.0 新しい経済のルールと生き方 [ 佐藤航陽 ]
全部レンチン!やせるおかず 作りおき 時短、手間なし、失敗なし
「読む力」と「地頭力」がいっきに身につく 東大読書 [ 西岡 壱誠 ]