SIS Lab
>
Blog
>
【Hugo】Render Hooks for Code Blocksを利用してコードブロックにファイル名を表示する

【Hugo】Render Hooks for Code Blocksを利用してコードブロックにファイル名を表示する

更新日:2022.09.04 作成日:2022.09.03

#Hugo

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>