Jekyll + kramdown の環境で，コードブロックにファイル名を表示する．
基本的には
GitHub Pagesでコードブロックにファイル名を表示する
を参考にして，
色々と自分好みに変更した．
<head>
(中略)
<link rel="stylesheet" href="style.css" type="text/css"></link>
<script src="named-codeblock.js"></script>
</head>
もちろん CSS も読み込むので，ついでに載せておいた．
.named-block-filename{
background-color: hsl(0, 0%, 85%);
display: inline-block;
padding-left: 5px;
padding-right: 5px;
margin-left: 10px;
}
これはもちろんお好みで．
```python
def add(a, b):
return a + b
```
{:filename="hoge.py"}
highlight タグを使うとき{% highlight python %}
def add(a, b):
retrun a + b
{% endhighlight -%}
{:filename="hoge.py"}
{% endhighlight -%} の最後に - (ハイフン) が必要なことに注意
named-codeblock.js のソースコードfunction insert_filename(to_insert, filename){
var div = document.createElement("div");
div.textContent = filename;
div.classList.add("named-block-filename");
to_insert.insertBefore(div, to_insert.firstChild);
}
document.addEventListener("DOMContentLoaded", () => {
const filename_attr = "filename"
// highlight タグ
const blocks_tag = document.querySelectorAll(`figure.highlight[${filename_attr}]`);
Array.from(blocks_tag).forEach(block => {
const filename = block.getAttribute(filename_attr);
insert_filename(block, filename);
});
// fenced code block (backquote 3つ)
const blocks_fenced = document.querySelectorAll(`div.highlighter-rouge[${filename_attr}]`);
Array.from(blocks_fenced).forEach(block => {
const filename = block.getAttribute(filename_attr);
const div_to_insert = block.querySelector("div.highlight");
insert_filename(div_to_insert, filename)
});
});