Better Code Highlighting with Shiki

I’ve used Prism for code highlighting in many projects, but I’ve never been very happy with the results as it usually struggles to properly detect syntax, especially with uncommon languages, or with JSX. As I was scrolling through Twitter the other day, I saw some mention about a project called Shiki, which uses TextMate grammars and VS Code themes to perform syntax highlighting. This seemed like a great solution for code highlighting, so I decided to give it a try.

After a very simple process of installing shiki as well as the rehype-shiki plugin, I was able to convert my blog to using shiki without any major gotchas! Check out the before/after image below to see the difference shiki makes in properly highlighting code!

Old syntax highlighting
New syntax highlighting