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

published: 2021/6/27 update: 2021/9/29

Table of Contents

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とかを使うと多分楽です。

記事に間違い等ありましたら、お気軽に以下までご連絡ください

E-mail: illumination.k.27|gmail.com ("|" replaced to "@")

Twitter: @illuminationK

当HPを応援してくれる方は下のリンクからお布施をいただけると非常に励みになります。

Ofuse

Other Articles

Site Map

Table of Contents

    TL;DR

    前提

    実装


当HPを応援してくれる方は下のリンクからお布施をいただけると非常に励みになります。

Ofuse
Privacy Policy

Copyright © illumination-k 2020-2021.