コードブロックにファイル名を埋め込む方法

[ironsand]

トリプルバッククォートを使いコードブロックを記述するときにQiitaですと言語名:ファイル名をトリプルバッククォートの直後に書くことで、そのコードのファイル名とすることができますが、同様の事をHugoでするにはどうすればいでしょうか？

以下の記事にあるこの画像のような機能です。

https://qiita.com/Qiita/items/c686397e4a0f4f11683d#code—%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E6%8C%BF%E5%85%A5

HugoではMarkdownの解析にGoldmarkを使っている所までは調べたのですがGoldmarkのドキュメントを読んでも該当の機能が見つけられませんでした。

記述方法自体は多少変わっても構いませんので、コードブロックにファイル名を追加する方法はありますか？

[peaceiris]

以下の記事のように Shortcode を作る方法があります。

ソースコードをハイライト表示する (highlight) | まくまくHugo/Goノート

[ironsand]

ありがとうございます。ページの解説を参考にして以下のコードである程度Qiita風にすることができました。ただコードブロック自体をダークモードにするのがうまくいかなかったのでもう少し調べてみます。

code.html

{{ $title := .Get "title" }}
{{ $lang := or (.Get "lang") "" }}
<figure class="x-code-block">
{{ with $title }}<figcaption class="x-code-block-title">{{.}}</figcaption>{{ end }}
<div class="x-code-block-code">{{ highlight (trim .Inner "\r\n") $lang "" }}</div>
</figure>

custom.css

figure{
  line-height: 18px;
  letter-spacing: 0;
} 
figcaption {
  font-size: 12px;
  line-height: 18px;
  padding: 4px 2px;
  margin-left: 13px;
  letter-spacing: 0;
  display: inline-block;
  background-color: grey;
}
.x-code-block {
  margin: 10px 0;
  background-color: #364549;
  color: white;
}
.codeblock {
  margin: 0;
}
pre {
  margin: 0px;
}