【Hexo】コードブロックにファイル名を入れる（テーマ：light）

概要

コードブロックにQiitaみたいなファイル名があると便利なので、作ってみる

目次

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

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

1
<p class="codeblock-filename">[ファイルパス]</p>

コードブロック書き方

2.CSSを定義

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

1
2
3
4
5
6
7
8
9
10
11
12
/* ファイル名付きコードブロック */
.codeblock-filename{
  background: #eee;
  border: 1px solid #ddd;
  border-bottom: none;
  color: #999;
  padding-left: 15px;
}
.codeblock-filename + .highlight{
  border-top: none;
  margin-top: 0px;
}

コードブロックCSS

完成

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

最後に

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

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

以上。今回もお疲れさまでした。