This WordPress Plugin for Code Highlighting Kicks Ass

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.

That’s actually Go, but good guess really.

🤘

CodePen

I work on CodePen! I'd highly suggest you have a PRO account on CodePen, as it buys you private Pens, media uploads, realtime collaboration, and more.

Get CodePen PRO

One response to “This WordPress Plugin for Code Highlighting Kicks Ass”

  1. Love it! It’s so good!

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top ⬆️