Hugo で markdown の hタグに自動で anchorタグをつける

はじめに

Hugo で markdown の hタグに自動で Anchorタグをつける方法をまとめます。 Hugo では markdown内の hタグには自動で idタグがつきますが、そこに anchor も合わせてつけて、hタグをクリックすすると anchorリンクが取得できるようにします。

Hugo で markdown の hタグに自動で Anchorタグをつける

Shortcode に .Content を食わせる記事が多いですが、以下の discourse の記事として正規表現で頑張っている方法を見つけました。

discourse.gohugo.io

以下のように replaceRE することで # に anchorリンクをつけています。

{{ .Content | replaceRE "(<h[1-9] id=\"([^\"]+)\".+)(</h[1-9]+>)" "${1}&nbsp;<a class=\"headline-hash\" href=\"#${2}\">#</a> ${3}" | safeHTML }}

まとめ

Hugo で markdown の hタグに自動で Anchorタグをつけることができました。