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

**URL:** <https://discourse.gohugo.io/t/topic/31065>\
**Category:** 日本語\
**Created:** [February 5, 2021, 1:14pm UTC](https://discourse.gohugo.io/t/topic/31065 "2021-02-05T13:14:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ironsand](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ironsand/32/8811_2.png) [@ironsand](https://discourse.gohugo.io/u/ironsand)\
**Post date:** [February 5, 2021, 1:14pm UTC](https://discourse.gohugo.io/t/topic/31065/1 "2021-02-05T13:14:54Z")

</div>

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

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

 ![2021-02-05_22h12_18](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/2/29274e0cab57cefb28654acd42d40efdd0a76d23.png)  
[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](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のドキュメントを読んでも該当の機能が見つけられませんでした。

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

---

<div class="post-metadata">

**Author:** ![peaceiris](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/peaceiris/32/7358_2.png) [@peaceiris](https://discourse.gohugo.io/u/peaceiris)\
**Post date:** [February 5, 2021, 1:54pm UTC](https://discourse.gohugo.io/t/topic/31065/2 "2021-02-05T13:54:45Z")

</div>

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

[ソースコードをハイライト表示する (highlight) | まくまくHugo/Goノート](https://maku77.github.io/hugo/shortcode/highlight.html)

---

<div class="post-metadata">

**Author:** ![ironsand](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ironsand/32/8811_2.png) [@ironsand](https://discourse.gohugo.io/u/ironsand)\
**Post date:** [February 6, 2021, 8:06am UTC](https://discourse.gohugo.io/t/topic/31065/3 "2021-02-06T08:06:25Z")

</div>

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

### code.html

```auto
{{ $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

```auto
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;
}

```

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [April 5, 2021, 1:48am UTC](https://discourse.gohugo.io/t/topic/31065/4 "2021-04-05T01:48:04Z")

</div>

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.