Hexoのコードブロックにファイル名を表示｜CSSだけで実装する方法

概要

本記事では、Hexoのコードブロックの上にファイル名を表示する方法について解説していきます。

というのも「このコードはどのファイルに書くの？」って読者は気になるはずなのに、Hexo標準だとファイル名が表示できないんですよね（- -;

Qiitaみたいにコードブロックの上にファイルパスがチョコンと乗ってるあの形、読みやすくていいですよね。

ここではjsを使わず、HTMLとCSSだけで力技で実装する手順を紹介していきます！

これで記事のコードブロックが一気に見やすくなります。
それではやっていきましょう！

目次

手順

1.HTML要素を.mdファイルに記載

\site\source\_posts\[任意].md

1
<p class="codeblock-filename"><span>[ファイルパス]</span></p>
![コードブロック書き方](/images/posts/20251013/codeblock-p.png "コードブロック書き方")

2.CSSを定義

\site\themes\light\source\css\[自分の].css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* ファイル名付きコードブロック */
.codeblock-filename{
  background: #eee;
  border: 1px solid #ddd;
  border-bottom: none;
  color: #727272;
  font-size: 0.9em;
  margin-bottom: 0px !important;
}
.codeblock-filename + .highlight{
  border-top: none;
  margin-top: 0px;
}

.codeblock-filename span{
  display: inline-block;
  background-color: #f7f7f7;
  width: fit-content;
  padding: 3px 7px;
  margin-top: 0px;
  border-radius: 5px;
}
![コードブロックCSS](/images/posts/20251013/codeblock-css.png "コードブロックCSS")

完成

無事設定できました。
完成

締め

jsで色々やったりしましたが、HTMLの生成タイミングの関係でうまくいかず、、
結局力技でやる形にしました。

まぁ変にバグが起こるよりはいいか（- -)b

以上。
力こそジャスティス
今回もお疲れさまでした。

エンジニアリング
ブログ, Hexo, エンジニアリング