CSSだけでHugoのコードブロックにファイル名を表示させる
前提
- Hugo Static Site Generator v0.74.3
Hugoでのコードブロック<pre><code>〜</code></pre>
の取り扱い
Markdown記法では```
(上)と```
(下)で挟み込んだところの記述がコードブロックとして認識される1。
Hugoでは```html
(上)と記述すると「これはhtmlの記述なのだ」とHugoが認識して自動的にハイライトしてくれる。
```
<p>ハイライトされない。</p>
```
```html
<p>ハイライトされる。</p>
```
こういう記述は、このように出力される。
<p>ハイライトされない。</p>
<p>ハイライトされる。</p>
実現したいこととその手段
Qiitaでは```html:sample.html
と表記すると、コードブロックにsample.htmlと表示される。
<p>ハイライトされて、しかも、タイトルも表示される。</p>
Hugoではデフォルトではそのような機能はついていないので、何かしらの手段を用いて実装しなければならない。
みな、同じようなことを考えるようで、おおまかに分けて、2つの方法が紹介されている。
Javascriptで実装
Javascriptはあまり使いたくなかったので、テーマ側で素のhtmlとして出力できないかと考えた。
テーマ側で実装
みどりみちさんの手法は、とても魅力的だったが、どうもうまく表示されない。
たぶん、単純な間違えがあるんだろうとは思うけど、それがわかるほどの知識が今、ない。
そのうち、リトライしたい。
CSSだけで実装
出力されているソースコードを見ると、こうなっている。
<div class="highlight">
<pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4">
<code class="language-html:sample.html" data-lang="html:sample.html">
<<span style="color:#f92672">p</span>>ハイライトされて、しかも、タイトルも表示される。</<span style="color:#f92672">p</span>>
</code>
</pre>
</div>
CSSのcontentプロパティでdata-lang
を表示させればいいのではないか。
読み込んでいるCSS or Style要素に以下のコードを追加してみた。
pre > code[data-lang]:before{
content: attr(data-lang)"\A";
white-space: pre;
}
これでpre
直下のcode
で、data-lang
属性をもっている場合のみ、html:sample.htmlと表示される。
まとめ
この方法の欠点としては以下のものが考えられる。
- Hugoの仕様に依存している。
- html:sample.htmlは不格好?
- html:sample.htmlはコピーできない。
Hugoの仕様については変更があれば対応できる。
種類とファイル名がわかるようにしたいと思っていたので、html:sample.htmlという表示は不格好ではあるかも知れないが、許容範囲だ。
ファイル名をコピーするという需要はどれほどあるのだろうか。ファイル名を確かめることはあっても、それをコピー&ペーストした体験はないので、問題ない。
メリットとしては、とてもシンプルだ、ということに尽きる。
たぶん、Hugoに限らず、移植できる可能性がある。
-
エスケープする方法がわからなかったので
```
は全角で記述している。ほんとうは半角。 ↩︎