Refractor Test

I wondered if it is possible to do syntax highlighting under these two criterias: Without shipping syntax parser to the client (huge bundle size) nor Without doing dangerouslySetInnerHTML (prone to XSS)

So I figured to use refractor to do the syntax highlighting, which converts the code using Prism.js into unist AST in compile time / on server side. On client side, this AST is hydrated using rehype-react

Even the styling for this code block above is encapsulated into a CSS Module so it won’t increase the CSS file size for the rest of the site.