【Hugo】Render Hooks for Code Blocksを利用してコードブロックにファイル名を表示する
Hugo v0.93.0からコードブロックに対してもRender Hooksを利用できるようになった。
Render Hooksを利用して、コードブロックにファイル名を表示する方法を調べたときのメモを以下に残しておく。
Release v0.93.0 · gohugoio/hugo
Render Hooks for Code Blocksを利用してコードブロックにファイル名を表示する
Render Hooks for Code Blocksを利用することで下図のとおり、コードブロックの上部にファイル名を表示できる。
Markdown
{name="content/blog/blogcard.md"}の形式でAttributes（name）を指定すると、Render Hooks側でファイル名（.Attributes.name）を取得できる。
```html {name="content/blog/blogcard.md"}
{{< blogcard "https://www.meganii.com/blog/2022/08/14/migration-from-github-to-cloudflare-pages/" >}}
{{< blogcard "https://www.meganii.com/blog/2022/08/11/proxying-cloudinary-with-cloudflare-workers/" >}}
{{< blogcard "http://example.com" >}}
```Render Hooks for Code Block
下記のとおり、layouts/_default/_markup/render-codeblock.htmlを作成する。
layouts/_default/_markup/render-codeblock.html
<div>
{{- $name := .Attributes.name -}}
{{ with $name }}<div class="codeblock--name">{{ . }}</div>{{ end }}
<div class="codeblock--content">
{{- highlight (.Inner | safeHTML) .Type .Options }}
</div>
</div>2022年9月3日現在このブログでは、TailwindCSSを使っているので、以下のようなCSSを当てている。
<div>
{{- $name := .Attributes.name -}}
{{ with $name }}<div class="codeblock--name w-fit text-sm text-white bg-gray-600 mt-1 py-1 px-1.5 rounded-t-lg">{{ . }}</div>{{ end }}
<div class="codeblock--content">
{{- highlight (.Inner | safeHTML) .Type .Options }}
</div>
</div>