shiki は、コードのシンタックスハイライトを行うパッケージで、他のパッケージ（highlightjs、prismjs）よりも比較的新しく、あまり知られていません。shiki は、TextMateの文法をトークナイザの定義として使用し、他の場所から直接使用できるだけでなく、カスタム言語を書く必要もないため、統一された基準がある場合、拡張も比較的容易です。 また、サポートされている言語のバリエーションも豊富で、設定も簡単です。組み込みのテーマも多く、元のprismjsを置き換えるのに便利です。gatsby-remark-shikiをインストールして設定を適用するだけで完了です。素晴らしいですね。

いくつかの小さな問題に遭遇しました：

• 元々はReactのhighlightを使用していましたが、すべてをJSXまたはTSXに変更する必要があります。
• もしc++を使用している場合、cppに変更する必要があります。

結果を見てみましょう：

const Component = () => <MyComponent />