GatsbyJS のコードブロックに言語バッジをつける方法

この記事では GatsbyJS のコードブロックに言語バッジをつける方法について紹介します。

前提として gatsby-remark-prismjs を使っています。

やり方を考えてるとき www.gatsbyjs.org/docs のコードブロックにも言語表示があったのと、このサイト自体も GatsbyJS で書かれていたことを思い出しました。
そこでインスペクターで覗いてみたら ::beforeを使っていました。

同じ方法で実装してみます。

Before

After

CSS を書く

title=globa.scss

pre[class*='language-'] {
  position: relative;

  &::before {
    position: absolute;
    top: 0;
    right: 2em;
    padding: 0 8px;
    border-radius: 0 0 4px 4px;
    font-size: 0.8em;
    color: black;
  }

  &.language-javascript::before {
    content: 'JS';
    background: yellow;
  }

  &.language-ts::before {
    content: 'TS';
    color: white;
    background: blue;
  }
}

ついでにコードブロックタイトルの style も変えました。

::before (疑似要素) は最後につけないといけないため scss でも、下記の書き方はできないんですね。地味に。

hoge::after {
  &.foo {
  }
}