Displaying code as plain black-and-white text is a massive mistake when writing tutorials. Reading colorless code is exhausting for the eyes; it makes it much harder to tell the difference between variables, functions, and strings.
While I was cleaning up my personal Next.js blog, fixing the code blocks was my
top priority. The best way to get proper syntax highlighting is to combine
rehype-pretty-code with shiki. This setup works really well within the
JavaScript and Next.js ecosystem.
The installation is straightforward through the terminal. The key is using the rehype plugin so that the coloring happens automatically while the MDX content is being processed, rather than you having to do it manually.
The biggest advantage of using shiki is the theme flexibility. You can use the
exact same themes you use in VS Code, like One Dark Pro or Night Owl.
Keeping your blog themes consistent with your daily editor makes the reading
experience feel much more natural and comfortable.
To implement it, you just need to create a single configuration file, like
rehype-pretty-code-options.ts, to define your chosen theme. If you're using
content layer, just register the plugin in your config so every code block in
your MDX files gets highlighted automatically during the build process.
There are downsides too. The configuration adds a bit of weight to your build process because the system has to process every single line of code. However, the impact is negligible for a personal blog. Prioritizing the reader's visual experience is much more important than chasing build speeds that only differ by a few seconds.
Good luck beautifying your blog!