Gatsby + prism.js で「言語名（language）」を右上に表示する

3928 ワード
gatsby PRISM prismjs PRISM テキストリンク

元記事：genkitech.net

右上のこういうのを表示する方法です。タイトルと別で埋め込む方法が日本語で見つからなかったので貼っておきます。

markdownはこんな感じ

markdown
```js:title=filename.js
じゃヴぁすくりぷと
```　

```ps
ぽうぇｒしぇる
```　

やり方

左上のタイトル部分は、プラグイン「gatsby-remark-prismjs-title」で入れられるみたいですが、言語名を別で表示したい場合、以下の様に言語に対応するcssを書いてあげる必要があるようです。

css

.gatsby-highlight {
  position: relative;
}

.gatsby-highlight pre[class*="language-"]::before {
  background: lightgray;
  border-radius: 0 0 0.25rem 0.25rem;
  color: black;
  font-size: 12px;
  letter-spacing: 0.025rem;
  padding: 0.1rem 0.5rem;
  position: absolute;
  right: 1rem;
  text-align: right;
  top: 0;
}

.gatsby-highlight pre[class="language-js"]::before {
  content: "JavaScript";
  background: lightgreen;
  color: black;
}
.gatsby-highlight pre[class="language-ps"]::before {
  content: "PowerShell";
}

最後の2つのところで言語ごとに色を変えたりしています。必要に応じて自由に追加してください。

言語名を出したいだけであれば「gatsby-remark-prismjs-title」は必要ないですが、ファイル名情報が埋め込まれているコードの言語名を表示したい場合、「gatsby-remark-prismjs-title」を入れておかないとうまく行かない様です。