· 1 min read
Switching from prismjs to shiki
This article was auto-translated from Chinese. Some nuances may be lost in translation.
shiki is a code syntax highlighting package that is relatively newer and less well-known compared to other libraries (like highlightjs and prismjs). shiki uses TextMate grammars for tokenization. Aside from being able to directly reuse grammars from elsewhere without writing custom language definitions, having a unified standard also makes future extensions much easier.
Additionally, its language support is very rich, it is easier to configure, and it comes with many built-in themes, so I went ahead and replaced prismjs. Just installed gatsby-remark-shiki, applied the config, and was all set. Awesome!
Ran into a few minor issues:
- Code previously highlighted with
reacthad to be changed tojsxortsx - If using
c++, it needed to be changed tocpp
Here’s the result:
const Component = () => <MyComponent />Related Posts
- Recreating My Room with Three.js Using React Three Fiber, I brought my real room into the browser—turning physical objects into an interactive table of contents, and using spatial memory to tell the story of my life and work over the past few years.
- Things to Keep in Mind When Using Images in Frontend Development Expanding on Jake Archibald's article, this post organizes how modern responsive images should be written: why width/height are still necessary, when to use CSS aspect-ratio, how to choose between AVIF and WebP, and using picture/source/srcset for art direction on mobile devices.
- CSS field-sizing — Auto-resize Form Elements with a Single Line of CSS Previously, auto-resizing a textarea required listening to scrollHeight in JavaScript. With CSS field-sizing: content, a single line replaces it all, supporting textarea, input, and select. This article covers the pain points of older approaches and how to use field-sizing.
- Make Your Link Underlines Look Better: text-underline-offset By default, underlines sit very close to the text. Some designers dislike this look, and personally, I don't think it looks great either.