Hugoのmarkupセクションでは、Hugoがマークアップ(HTML、Markdown、その他)をどのように解析、レンダリングし、表示するかを設定できる。

Hugoの公式ドキュメントのリンク:

  1. markupセクション全般: https://gohugo.io/content-management/formats/
  2. goldmark: https://gohugo.io/getting-started/configuration-markup/#goldmark
  3. highlight: https://gohugo.io/content-management/syntax-highlighting/
  4. tableOfContents: https://gohugo.io/content-management/toc/
  5. asciidocExt: https://gohugo.io/content-management/formats/#additional-configurations

当サイトでは現在以下の設定になっている(2023/06/03現在)

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true
  [markup.highlight]
    guessSyntax = true
    noClasses = true
    style = "witchhazel"
    tabWidth = 2

ざっくり説明すると

  • [markup.goldmark.renderer]

    • unsafe = true:Markdown内の生のHTMLを有効にする設定。(改行が<br>派なので必須)
  • [markup.highlight]:コードハイライトに関する設定

    • guessSyntax = true:Hugoが勝手にコードブロックの言語を推測してくれる。
    • noClasses = true:インラインスタイルを使用してシンタックスハイライトを行う。どっちがいいかはよくわからない。自分で設定作る人はfalseでクラスがつくようにする方がいいのかも。
    • style = "witchhazel":シンタックスハイライトのスタイルを"WitchHazel"にする。
    • tabWidth = 2:タブの幅を2スペース。(宗教)

style = ""部分の指定はChromaというシンタックスハイライターが提供されている。:公式のChromaスタイル一覧