· 1 分鐘閱讀

從 prismjs 改為 shiki

# 前端

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

遇到一些小問題:

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

看看成果:

const Component = () => <MyComponent />

相關文章

探索其他主題