💎
[Prism.js] 特定の言語がシンタックスハイライトされない場合の対処法
問題
自サイトのコードブロックのシンタックスハイライト（syntax highlight）にPrism.jsを使用しているが、特定の言語だけシンタックスハイライトされない（テキストがカラーリングされない）
Prism.jsとは
- 軽量で拡張可能なシンタックスハイライター
- 導入方法がシンプルで簡単
- 多数のサイトでの導入実績
要件
- コードブロックのシンタックスハイライトに Prism.js を使用している
- React, Next.jsで実装している
解決方法
モジュールとして import している場合、全ての言語が含まれているわけではないため、言語ごとに追加でimportする必要がある。
- モジュールとしてPrism.jsをimport
SomeComponent.tsx
import Prism from "prismjs";
- ブラウザの検証ツールでハイライトされないコードブロックの
language-が何になっているか調べる
<pre class="language-tsx" tabindex="0">
- tsxをPrism.jsのcomponentsからimportする
SomeComponent.tsx
import Prism from "prismjs";
import "prismjs/components/prism-tsx";
シンタックスハイライトが適用されるようになりました 🎉
↓
参照
Discussion