CSSでコードブロックの右上に言語名を表示する

TL;DR

技術ブログを書いているとコードを書く必要があるわけですが、その言語が何なのかをいい感じに表示したいと思っていました。CSSのcontentを使えば結構簡単に表示することができます。

前提

<pre>
    <code class="language-*">
        hello
    </code>
</pre>

というふうな感じでコードブロックが定義されているとします。*の部分に言語名が入ります。

実装

contentは要素の前後に::beforeや::afterを使うことでテキストや画像などを挿入することができます。contentで挿入したテキストなどは選択・コピーができませんが、言語名はむしろコピーされると邪魔なので、結構適している方法な気がします。

実装は以下になります。このコードブロックのような感じのデザインが得られます。

/* preの右上に表示するために必要 */
pre {
  position: relative;
  -webkit-overflow-scrolling: touch;
}

/* 言語全体で共通 */
pre > code[class*="language"]::before {
  background: #808080;
  border-radius: 0 0 0.25rem 0.25rem;
  color: white;
  font-size: 14px;
  letter-spacing: 0.025rem;
  padding: 0.1rem 0.5rem;
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  opacity: 0.4;
}

/* 言語別に設定 */
pre > code[class="language-rust"]::before {
  content: "Rust";
  opacity: 0.8;
}

まず、言語名を右上に表示したいので、position: absolute;である必要があります。preコード内での絶対位置がほしいので、最初の部分でpreタグのpositionをrelativeにしています。

次にlanguageがclassの名前に入っているものの後ろに表示するcontentのスタイルを定義しています。

最後に、言語別になんと表示するかを書いていきます。以上です。scssとかを使うと多分楽です。