Hugo Markdown でブロック要素にクラス属性を付与する

no extension

Hugo 0.81 からの機能らしいのだが， markdown テキスト中のブロック要素に対して class 属性を付けられるようだ（goldmark パーサを使う場合）。 これを有効にするには config.toml ファイルで

[markup.goldmark.parser.attribute]
  block = true

と指定する（既定値は false）。 YAML (config.yaml) で書くなら

markup:
  goldmark:
    parser:
      attribute:
        block: true

てな感じかな。

たとえば

- One
- Two
- Three
{ .cloud .center }

と箇条書きブロックの最後に { .cloud .center } とクラス名を付けると

<ul class="cloud center">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

という感じに展開してくれる。 ここで CSS 側を

ul.cloud {
  list-style: none;
  padding: 0
}
ul.cloud > li {
  display: inline-block;
  margin: 0 0.5rem;
}
.center {
  text-align: center;
}

などと定義すれば

  • One
  • Two
  • Three

とできる。

これは HTML のブロック要素に相当するものであれば何でも適用できるみたいで，通常の段落でも

*「人はなぜ大丈夫じゃないときに限って『大丈夫？』と訊くのだろう」*
<br>（某ラノベ作品より）
{.center}

などと書けば

「人はなぜ大丈夫じゃないときに限って『大丈夫？』と訊くのだろう」
（某ラノベ作品より）

とできる。

頻繁に使う表現なら shortcode を組んだほうがいいだろうが，ちょっとした装飾ならこちらのほうが手軽でいいかもしれない。