Pedro Duarte made a wishlist for styled code blocks in blog posts and documentation, then hand-rolls a perfect solution for that wishlist. For example, a feature to be able to highlight certain lines or words within the code block. The line highlighter is unique in that it only syntax highlights the highlighted lines, leaving the rest gray, which is a neat way to draw focus. And the word highlighter works via a RegEx. Pedro notes this isn’t a tutorial, it’s just a showcase of all the features that were stitched together using an existing combination of custom code and existing libraries. It’s pretty specific to React + Next.js + MDX, but apparently the core of it is based on rehype, which is new to me.
The results are pretty darn nice, modern-looking code blocks if you ask me! At the same time, I think it’s equally notable what’s not there as opposed to what is. I’ve seen (and tried) really featured-packed code blocks in the past, with features like a copy to clipboard button, a view raw code button, and export to whatever services. Pedro’s code blocks don’t even have an option to show the language in use.
Everybody’s wishlist is different. One thing that isn’t on Pedro’s wishlist is server-side rendering, but you can see on the blog post itself that it totally works with that (it’s presumably just Next.js at work). I’m pretty envious of that. Even though we’re ultimately both using Prism.js as the syntax highlighter, I’m only using it client-side. It occurs to me now that I could perhaps pull all this off in a Cloudflare Worker by using the HTMLRewriter — meaning it would essentially look like it’s done server-side and I could rip off the client-side copy of Prism. Maybe even more ideally, though, is that I’d do it as a WordPress plugin. Basically a PHP port of Prism, which seems like a tall order.
My wishlist for code block plugin…
- Syntax highlighting (both on the rendered site and while authoring)
- Server-side rendered
<span class="token-foo">stuff for syntax highlighting
- Works nicely with the native WordPress block editor code blocks (
```). For example, pasting in a code block auto-detects and uses the correct block. Easy to convert code to and from this kind of block.
- Optional line highlighter
- Optional line numbers
- Optional word highlighter
- Optional language display (and the ability to override that label)
- Copy and paste very cleanly
- No need to escape code while authoring
- Freedom to style however on the front end (for modes, themes, custom scrollbars, etc). Styling code blocks has a million things to consider, so smart defaults should probably come with the plugin, but easy to override.
- Stretch goal: can it somehow help with
inlinecode as well?
Used touse highlight.php (a port of highlight.js) in combination with PHP’s DomDocument functions to parse WorPress posts’
post_content. That would get you halfway there.
I’m actually currently working on a project using “Code Syntax Block”, not too bad. However, in the back-end, I’m having to go manually edit some of my code blocks to have proper contrast. Overall, it has most of the things on your list (I pretty much have the same), and it’s doing its job pretty well. Could be improved, but that’s usually the case for pretty much everything, so I guess it’s exactly where it should be right now.
I know I’m a bit late here but I recently wrote a WordPress block that I think hits on many of these features.
And a little demo in a Tweet: https://twitter.com/kevinbatdorf/status/1567501941432778755
It’s built fort he block editor only, and is powered by the vs code engine. You could run it in headless mode too as the transforms are applied while editing (in real time).
I’ll look to the list above to future feature improvements. Feedback is also welcome!