code blockにrefarenceをつける

Hugoでコードブロックを使うときは、GitHubからの引用し、その下に参照元のURLを貼り付けることが多い。 コードブロックの下にそのままURLが表示されるの若干見づらかったので、コードブロックとセットでいい感じに表示したい。

HugoにMarkdown Render Hooksにcodeblockが追加されてたのでこれが使えそう。

https://gohugo.io/templates/render-hooks/#render-hooks-for-code-blocks

v0.93.0からなので注意

やり方は簡単で、layouts/_default/_markup/render-codeblock.htmlを追加するだけ。

特定の言語に対応させるためにrendor-codeblock-bash.htmlのようなこともできるらしい。

コードブロックにrefを渡すと

```python{ref="this is ref"}
def hello():
    print("hello world")
```

このように参照元をつけることができる

def hello():
    print("hello world")

render-codeblock.htmlの例はこのような感じ

<div class="code-block">
    <div>
      {{- highlight (.Inner | safeHTML) .Type .Options }}  
    </div>
    {{- $ref := .Attributes.ref -}}
    {{ with $ref }}<div class="ref">参照: <a href={{ . }} target="_black">{{ . }}</a></div>{{ end }}
</div>

.Attributesで設定した値が取り出せる。