prismjs から shiki に乗り換えた

shiki はコードのシンタックスハイライトを行うパッケージで、他のパッケージ（highlightjs、prismjs）と比べると比較的新しく、まだあまり知られていない。shiki は TextMate 文法をトークナイザーの定義として使っており、他の場所からそのまま流用できて独自にカスタム言語を書く必要がないだけでなく、統一された標準があるため後から拡張するのも容易だ。 また、サポートしている構文が非常に豊富で設定もしやすく、組み込みテーマもたくさんあるので、ついでに元々の prismjs を置き換えることにした。gatsby-remark-shiki をインストールして設定を適用するだけで完了した。最高だ。

いくつかちょっとした問題にも遭遇した：

• 元々 react でハイライトしていた箇所は、すべて jsx または tsx に変更する必要がある
• c++ を指定していた場合は、cpp に変更する必要がある

成果を見てみよう：

const Component = () => <MyComponent />