Change from prismjs to shiki

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 />