shiki is a package that provides syntax highlighting for code. It is relatively new and less well-known compared to other packages like highlightjs and prismjs. shiki uses TextMate grammar as its tokenizer definition, which makes it easy to extend with a unified standard without the need for custom language development.

Additionally, it has a wide range of supported languages and is easy to configure. It also offers many built-in themes, so I replaced prismjs with it. Install gatsby-remark-shiki and apply the settings, and you're good to go!

Encountered some minor issues:

• React's highlight was originally used, but it needs to be changed to jsx or tsx.
• If using c++, it needs to be changed to cpp.

Let's see the result:

const Component = () => <MyComponent />