How to add syntax highlighter to HubSpot blog post with Rehype Pretty Code with Rehype
Implementing a syntax highlighter in a blog enhances readability and user experience by visually distinguishing code elements, making complex snippets easier to understand. It gives your blog a polished, professional appearance, facilitates learning for readers, and ensures consistent formatting across posts. Additionally, it boosts engagement and accessibility, attracting a broader audience and potentially improving SEO.
The Process
The tools that I'm familiar with that works in React are mostly built to work with markdown. Since this blog is written in HubSpot CMS Blog, the output is html. Because of this, I have to convert the html first to markdown and then adds syntax highlighting and finally convert it back to html.
Implementation on HubSpot CMS React
There's not really anything much different in the implementation in HubSpot CMS React compare to any other react project. If you have Professional subscription and up, you have serverSideProps available which allows the whole process to run on the server. But if you have a free account like I do, then you have to do the processing client side. I like how the code highlighting looks on the shadcn website, and for that I need to install these packages