VoxVlog

December 15, 2022

It’s called: Syntax-highlighting Code Block (with Server-side Rendering)

Weston Ruter really got it right:

• The SSR bit is huge. No client-side JavaScript means better performance: the first render of code is already highlighted. The <span>s and whatnot are part of the content, so wherever it syndicates can benefit from the highlighting if the proper CSS is in place. Looks great in Feedbin.
• It uses the default code block. It’s not some additional block you have to opt-in to using. It just extends the block that already works well. That means little stuff like using ``` triple backticks to start a block keeps working as well as color/size. Also, big stuff like all old blocks of code benefit from this immediately.
• It supports a zillion languages but also can auto-detect, which is good for old blocks.
• It can highlight lines, and that even works in the admin, with synaptic <mark> elements.
• It can add line numbers if you want
• It can wrap code or not wrap code

I once built a custom code block plugin that was largely based around this idea, and it worked pretty well, but it still relied on client-side JavaScript and it was a custom block. The one thing it did better was that it displayed the syntax highlighted code in the admin where this doesn’t. But I much prefer this approach and how with-the-grain of WordPress it is.

Related

🤘

ncG1vNJzZmibmKe2tK%2FOsqCeql6jsrV7kWlpa2dhZ3xygY6tn6KrXay8s7DPq5ysq12lubazyKdkn6eiYrCwsMRmn6KfmKG2qLTToqWgZZuesKy%2FjJqqrGc%3D