コードブロックにファイル名を表示
目次
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>
<div class="codeblock--content">
{{- highlight ($.Inner | safeHTML) $.Type $.Options }}
</div>
{{ else }}
<div class="codeblock">
{{- highlight (.Inner | safeHTML) .Type .Options }}
</div>
{{ end }}
</div>filename が指定されていないときには、これまでのcodeblockクラスを使用します。さもないと CSS で指定するmargin-top: -26pxによって前のパラグラフに接してしまいます。
また、filename の有無で$.Innerと.Innerを使い分けているのは、Go Template の仕様によります。
{{with pipeline}} T1 {{else}} T0 {{end}}
If the value of the pipeline is empty, dot is unaffected and T0
is executed; otherwise, dot is set to the value of the pipeline
and T1 is executed.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