Change from prismjs to shiki

💡

If you have any questions or feedback, pleasefill out this form

This post is translated by ChatGPT and originally written in Mandarin, so there may be some inaccuracies or mistakes.

shiki is a package that provides syntax highlighting for code. It's relatively newer compared to other packages like highlightjs and prismjs, and not as widely known. shiki uses TextMate grammar as its tokenizer definition, which means you can directly utilize grammars from other sources without needing to write custom language definitions. This standardization also makes it easier to expand in the future.

Additionally, it offers a rich variety of supported languages and is simpler to configure. With many built-in themes available, I easily replaced my original prismjs setup. Installing gatsby-remark-shiki and applying the configuration was straightforward—what a win!

I encountered a few minor issues:

I originally used react's highlight, so I had to change everything to jsx or tsx.
If you're using c++, you need to switch it to cpp.

Here’s what I came up with:

const Component = () => <MyComponent />

← tmux Shortcut Key Notes Several use cases of useMemo →

If you found this article helpful, please consider buying me a coffee ☕ It'll make my ordinary day shine ✨

☕Buy me a coffee

💡

If you have any questions or feedback, pleasefill out this form

Japanese 原文

This post is translated by ChatGPT and originally written in Mandarin, so there may be some inaccuracies or mistakes.

I encountered a few minor issues:

I originally used react's highlight, so I had to change everything to jsx or tsx.
If you're using c++, you need to switch it to cpp.

Here’s what I came up with:

const Component = () => <MyComponent />

← tmux Shortcut Key Notes Several use cases of useMemo →

If you found this article helpful, please consider buying me a coffee ☕ It'll make my ordinary day shine ✨

☕Buy me a coffee

Change from prismjs to shiki

Table of Contents

Change from prismjs to shiki

Table of Contents