プログラミングに関する記事や技術ブログを運営するなら、ソースコードの要素ごとにカラフルに色分け表示される機能（シンタックスハイライト）は必須ですよね。
Hugoには 「Chroma（クロマ）」 という超高速な専用ハイライターが最初から組み込まれているため、外部ライブラリ（Prism.jsなど）を読み込まなくても、少しの設定だけですぐにきれいなコードブロックを作ることができます！

1. 設定ファイル（hugo.toml）での準備

hugo.toml に以下の設定を追加します。

[markup]
  [markup.highlight]
    noClasses = false     # CSSクラスではなくインラインスタイルを使用するか（false推奨）
    style = 'monokai'     # 配色のテーマ
    lineNumbers = true    # 行番号を表示するか
    tabWidth = 4          # タブの文字数

主な設定項目

  • style: 色のテーマです。monokai dracula github など、多くのスタイルが選べます。
  • lineNumbers: true にすると行番号が表示されます。
  • noClasses:
    • false (推奨): CSSクラスを出力します。あとで自分のCSSで色を調整しやすくなります。ただし、別途Hugoコマンドでスタイルシートを生成する必要があります。
    • 初心者向け設定: とりあえず簡単に色を付けたい場合は、ここを true にするのではなく、上記の noClasses = false の設定のまま、あえて true のように振る舞わせる設定（インラインスタイル）もありますが、Hugoの今の標準では 「設定なし（デフォルト）」 でインラインスタイルが適用されることが多いです。
    • 一番簡単な設定:
      [markup.highlight]
  noClasses = false
      これだけで、多くの場合はきれいに表示されます。もし色がつかない場合は、style を指定してみてください。

2. 使えるスタイルを確認する

どんな色が選べるのか気になりますよね？
実は、Hugoの開発元であるGo言語製のツールがベースになっているので、非常に多くのスタイルに対応しています。

以下のコマンドをターミナルで打つと、使えるスタイルの一覧が見れます。

hugo gen chromastyles --list

3. 記事での書き方

あとは、Markdownで記事を書く時に、言語名を指定してコードブロックを書くだけです。

```python
def hello():
    print("Hello, Hugo!")
```

これだけで、Pythonの文法に合わせてきれいに色分けされます！🌈

よくあるトラブル：コードが長すぎてはみ出す！

コードブロックの中で長い行（例：横に長いHTMLタグやURLなど）を書くと、スマホなどの狭い画面で 枠からはみ出してしまう ことがあります。

これを防ぐには、CSSで「横スクロール」できるように設定するのがおすすめです。

CSS例（static/css/style.css）:

pre {
    background-color: #f5f5f5;
    padding: 15px;
    border-radius: 5px;
    
    /* ここが重要！ */
    overflow-x: auto; /* 枠からはみ出したらスクロールバーを出す */
}

こうしておけば、コードを無理に改行しなくても、読者はスクロールして全体を確認できます。
特にHTMLタグなどは、勝手に改行するとコピーした時に動かなくなることもあるので、デザイン側（CSS）で対応するのがスマートです！😎

Chromaを活用して美しくて読みやすいコード表記を実現しよう

プログラミング系、技術系の記事では、シンタックスハイライトの有無が記事の「読みやすさ」「理解しやすさ」「説得力」に直結します。
設定ファイル（hugo.toml）に数行を追加するだけで、Hugo標準のChromaを利用した高速で多言語対応の色分けが有効になるので、技術要素を扱うサイトであれば必ず最初に設定しておきましょう！✨