コードブロックにファイル名を表示

blog, Hugo
目次

Hugo の render hook を使用して、コードブロックにファイル名を表示するようにした。

目的

コードブロックにファイル名を表示するようにする。

方法

Hugo では、コードブロックの Markdown に言語に加えて、オプションを設定することができます。これをrender hookで取り込みファイル名として HTML に書き出します。

render hook

コードブロックを処理するlayouts/_default/_markup/render-codeblock.htmlを作成します。コードブロックのオプションはAttributes.filenameとして得られるので、その値を変数filenameに入れて使用します。

layouts/_default/_markup/render-codeblock.html
<div>
  {{- $filename := .Attributes.filename -}} {{ with $filename }}
  <div class="codeblock--filename">{{ . }}</div>
  {{ end }}
  <div class="codeblock--content">
    {{- highlight (.Inner | safeHTML) .Type .Options }}
  </div>
</div>

CSS

コードブロックとファイル名が重なるように CSS を整えます。カスタム CSS のファイル名は Hugo の Theme 毎に異なるため、使用している Theme に合わせます。

static/custom.css
.codeblock--content > div > pre {
  margin-top: -26px;
  padding-top: 40px;
  padding-bottom: 12px;
}
.codeblock--filename {
  display: inline-block;
  position: relative;
  padding: 2px 8px;
  background-color: #e7e9eb;
  color: #485a60;
  font-size: 13px;
  font-weight: 400;
}

使用方法

ファイル名は次のように記述すると

```bash {filename="sample.sh"}
echo test
```

次のように filename に指定したファイル名がコードブロックに表示されます。

sample.sh
echo test

参考サイト