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ではデフォルトではそのような機能はついていないので、何かしらの手段を用いて実装しなければならない。

みな、同じようなことを考えるようで、おおまかに分けて、２つの方法が紹介されている。

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">
            &lt;<span style="color:#f92672">p</span>&gt;ハイライトされて、しかも、タイトルも表示される。&lt;/<span style="color:#f92672">p</span>&gt;
        </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に限らず、移植できる可能性がある。

エスケープする方法がわからなかったので｀｀｀は全角で記述している。ほんとうは半角。 ↩︎