Hugo 0.81.0から、MarkdownでID、クラス属性の付与が可能になっています。

MarkdownでID、クラス属性を付与するための設定

必要な設定は「config.toml」で以下を記入するのみです。たったこれだけです。

[markup]
  [markup.goldmark]
    [markup.goldmark.parser]
      [markup.goldmark.parser.attribute]
        block = true    #<== ここをtrueにする

Hugoの公式サイトでは以下のように解説されています。

attribute

Enable custom attribute support for titles and blocks by adding attribute lists inside single curly brackets ({.myclass class=“class1 class2” }) and placing it after the Markdown element it decorates, on the same line for titles and on a new line directly below for blocks.

タイトルやブロック要素の後に、{}でクラス名を書きなさい、ということです。

といっても、例を見ていただいた方が早いでしょう。

利用例：段落の場合

まずは、段落要素を例にします。

Markdownで文章を書き、改行すると自動的に段落要素（pタグ）として認識されます。

段落に、ID、クラス属性を付与する場合は、文章を書き改行したところで、{}の中にクラス名、ID名を入れます。

以下がその例です。ちなみに、サンプル文章は、夏目漱石「私の個人主義」からの引用です。

私は毎日近頃この力説ごととして事の一方へ着けらしくた。単に十一月に活動顔もきっとそうした影響んですまでへさといただきですがは講演するないたと、実際にも云うないたませう。権利に云いでのは何でもかでも時分にけっしてませませた。
{.para #memo}

ポイントは、文章の後の「.para」と「#memo」の部分であり、「.」はクラス、「#」はIDを表しています。

レンダリング結果は以下のようになります。

<p class="para" id="memo">
私は毎日近頃この力説ごととして事の一方へ着けらしくた。単に十一月に活動顔もきっとそうした影響んですまでへさといただきですがは講演するないたと、実際にも云うないたませう。権利に云いでのは何でもかでも時分にけっしてませませた。
</p>

利用例：リストの場合

次に、リスト要素の場合です。

段落の場合と同様に、要素の後で、{}の中にクラス名、ID名を入れます。

以下のように各要素にそれぞれクラス名を付与できます。

* Fruit
  * Apple
  * Orange
  * Banana
  {.fruits}
* Dairy
  * Milk
  * Cheese
  {.dairies}
{.list}

レンダリング結果は以下のようになります。

<ul class="list">
    <li>Fruit
        <ul class="fruits">
            <li>Apple</li>
            <li>Orange</li>
            <li>Banana</li>
        </ul>
    </li>
    <li>Dairy
        <ul class="dairies">
            <li>Milk</li>
            <li>Cheese</li>
        </ul>
    </li>
</ul>

正直、この機能は、かなりありがたいです。

せっかくMarkdownで記事を書けるのに、IDやclassを付与する場合はHTMLのタグで書く必要があるのはかなり面倒ですから。

Hugoはどんどん進化し便利になっています！ ほんと、WordPressからHugoに乗り換えていて良かったです👍

関連：ブログ・サイトの管理をWordPressからHugoに移行したら爆速で快適

参考：Hugo のバージョンをアップデート