Prism.jsのシンタックスハイライトがちょっと微妙な感じだった

Prism.js が jsx と tsx に対応してなかった

https://t.co/bD3Yts6zcT
昨日の"
— tagucch (@tagucch) September 11, 2021

このツイートのツリーに書いたんだけど、Prism.js のシンタックスハイライトが jsx と tsx に対応していなかった。

Supported Languages の中に JSX も TSX もあった(React JSX みたいな書かれ方だったので見落としていた)

と思っていたのだけどなんかうまくいかなかった。

なんでJSのほうだけシンタックスハイライトが有効になるのか全然分からん pic.twitter.com/lhY6srcxo6
— tagucch (@tagucch) September 11, 2021

気になって自分の Prismjs 使ってるところ見てみたのですが、原因これだったりします？別途 import が必要的な。 pic.twitter.com/MZm02SZ5Mz
— Yuji Tsuburaya (@___35d) September 11, 2021

Yuji Tsuburaya さんからリプライをもらい、プラグイン的なものを import しないとダメっぽいというのを知りやってみたところ、TypeScript と JSX はうまくいった。

import 'prismjs/components/prism-tsx'

みたいな感じでプラグインを import するんだけど、TSX のプラグインだけなぜかエラーになってしまった。

TS, JSX, TSX はプラグインを import しないといけないみたい(プラグインの import が不要な言語がどれか分からない)し、TSX に関してはライブラリのコードがエラー吐いてるし、思ったより Prism.js 微妙だな〜と思っていたらこんな記事を見つけた。

乗り換えようかな。