HugoでMarkdownのテーブルに属性を付与する

HugoでMarkdownのテーブルに属性を付加する

Hugo、便利ですよね。当ブログはHugoを使って作成していますし、私が管理しているいくつかのサイトでも積極的にHugoを採用しています。
少なくとも管理者が一人である限り、HugoのようなStatic Site Generatorはメチャクチャ強力だと思っています¹。

さて、そんなHugoですが、0.60.0からCommonMarkに準拠したgoldmarkと呼ばれるMarkdownパーサー²をデフォルトで使うようになりました。
その結果、いくつかの機能が非推奨になったり変更が加えられたりしています。その影響を受けるものの一つがMarkdownのテーブルです。

雑にテーブルを書くだけなら何も問題はないのですが、例えばテーブルにclass等の属性を付与したいとき、Hugoのデフォルト記法では対応できません。
とはいえ今までは、利用するページのみMmarkというパーサーを利用することで以下のような記法で実現できていました。

---
markup: mmark
---

{#id .class data-example=10}
|example A|example B|
|---|---|
|value A|value B|
|value C|value D|
|value E|value F|

しかし、Hugo 0.60.0にてMmarkは非推奨となり、将来のバージョンで削除されることが予告されました³。Hugoの開発スピードは非常に速いため、もしかするとじきに削除されてしまうかもしれません。
したがって、Mmark以外の手法を取る必要があります。

これに対応する一番安直な方法は、HTMLをベタ書きすることです。しかしながら、これではMarkdownを使うメリットがありません。また、Hugo 0.60.0はデフォルトでHTMLを削除してしまいます⁴。あまり嬉しくありません。

Shortcodeを使う

こんなときはShortcodeを使えばよいのです。というわけで、ドキュメントを読みながら書いてみました。replace とか初めて使った……。

完成したものがこちら。

{{ $attrs := "" }}
{{ range $k, $v := .Params }}
  {{ $attrs = printf "%s %s=\"%v\"" $attrs $k $v }}
{{ end }}

{{ $newTable := printf "<table %s>" $attrs }}
{{ (replace (.Inner | markdownify) "<table>" $newTable) | safeHTML }}

Snippetは以下でも公開しています。

• https://gitlab.com/snippets/1944276
• https://gist.github.com/clvs7-gh/77b1f50d51d4e238c8482fc31296d4c4

動作としては、Shortcodeの引数を全てテーブルの属性として処理するようにしました。最初はid, classくらいでいいかなと思って .Get とか使ってたんですが、後から data- とか使いたいわ、ということに気がついて今に至ります。テーブルをもっと便利に！　とかではなく、あくまで従来のテーブルと同様に使えることを目指しました。

動作を試してみます。冒頭で出した以下のテーブルで確認しましょう。

|example A|example B|
|---|---|
|value A|value B|
|value C|value D|
|value E|value F|

まずは、素のテーブルです。

使っているテーマによる影響を受けていますが、普通ですね。
ところで、弊サイトは現在時点においてBeautiful Hugoというテーマを使っており、これは内部でBootstrapを利用しています。Bootstrapはテーブルに対してclassを付与することでデザインを変えることができます⁵。
というわけで、Shortcodeを使っていくつかクラスを付与してみましょう。以下のように使います。

{{< table class="table table-hover table-condensed" >}}
|example A|example B|
|---|---|
|value A|value B|
|value C|value D|
|value E|value F|
{{</ table >}}

結果は以下の通り。

テーマの影響でちょっと分かりにくいですが、微妙に表示と挙動が変わっています。よいですね。後はお好みでCSSを書いてあげると幸せになれると思います。

まとめ

HugoではMarkdownを用いてテーブルを表現できます。ただし、デフォルトではテーブルに対して属性を与える記法がサポートされていません。
従来からMmarkを用いて該当のテーブルに属性を与える手法がありましたが、Hugo 0.60.0からMmarkは非推奨になりました。そこで、本記事ではShortcodeを使う方法を提案し、その使い方を示しました。この手法を用いることで、Markdownの便利さを活かしつつテーブルの細かなデザイン調整ができるようになると考えられます。