はてなBlogでどの言語のシンタックスハイライトなのかをCSSで表現する

今日は CSS で、以下のように「どの言語のシンタックスハイライトなのか」を示すボックスを作りたいと思います。

• before
  • 
• after
  • 

前提

ぼくは Markdown でこの Blog を今書いているんですが、ソースコードを書くと、はてな Blog では以下の HTML でレンダリングが行われます。

$ echo "hello world"
hello world

↓

<pre class="code lang-zsh" data-lang="zsh" data-unlink="">
$ <span class="synStatement">echo</span> 
<span class="synConstant">"hello world"</span>
hello world
</pre>

まずはボックスをつくる

上記のとおり、ソースコードは <pre class="code"> で記述されているので、まずはこれを利用してボックスを作ります。

CSS には疑似要素という考え方があり、特定の要素の特定の部分を整形することができます。文章の最初の文字、とかは良く見るのではないでしょうか。

ここでは、<pre class="code">の最初の子要素を意味する ::before を使って、ソースコードの最初に挿入することを狙います。

pre.code::before {
    position: absolute;
    top: 0px;
    right: 0px;
    content: attr(data-lang);
}

ソースコードの右上に密着させたいので、position: absolute; で絶対配置にした後、top、right をともに 0px で指定します。

「どの言語なのか」については、はてな Blog の方で data-lang 属性に埋め込んでくれるので、これを取得するために content を attr(data-lang) にしています。

この結果が以下。zsh の文字列が取得・配置できました。

整形

あとは整形します。

ちょっと文字列として右に寄り過ぎなので、padding で横を 10px 空けます。 background-color で背景色として黒を透過させ、フォント色とサイズを良いかんじにして出来上がりです。

pre.code::before {
    position: absolute;
    top: 0px;
    right: 0px;
    content: attr(data-lang);
    display: block;
    color: white;
    padding: 0px 10px;
    font-weight: bold;
    font-size: 0.6rem;
    background-color: rgba(0,0,0,0.3);
}