shiki 是一個將程式碼語法做高亮的套件，跟其他套件（highlightjs, prismjs）算是比較新一些，也比較少人知道。shiki 是用 TextMate grammar 當作 tokenizer 的定義，除了可以從其他地方直接拿來用不需要再另外撰寫客製化語言之外，有統一的標準之後要擴充也比較容易。 另外則是它支援的語法很豐富也比較好設定，內建的主題也很多，就順手把原本的 prismjs 換掉了。安裝 gatsby-remark-shiki 再把設定套上去就搞定了，讚讚。

遇到一些小問題：

• 原本用 react 的 highlight，要全部改成 jsx 或是 tsx
• 如果是用 c++，要改成 cpp

看看成果：

const Component = () => <MyComponent />