Syntax Highlighting Code Block for Gutenberg – a Short Review

I’ve always been impressed by the late Alex Mills’ Syntax Highlighter Evolved WordPress plugin, but it hasn’t been regularly updated since Automattic took over the plugin. I used the plugin religiously on this site and others when I needed some pretty and easy-to-use highlighting.

Enter the Block Editor

The block editor made syntax highlighting a little more difficult. No longer would shortcodes suffice. The syntax highlighter had to work in Gutenberg.

Fortunately, Syntax Highlighter Evolved included a block. I was set. However, it had its drawbacks.

Problems With Syntax Highlighter Evolved

I suppose the main issue I had/have with Syntax Highlighter Evolved is that without the plugin installed, the code blocks simply wouldn’t render (for block purposes).

Another irritating bug was that the ampersands were converted into HTML entities. I’m not sure if this is fixed at this point.

This was no bueno for me and as I mentioned, it appeared the development of the popular plugin has taken a back seat.

I played around with many other syntax highlighting plugins, some block-enabled, some not. I just wasn’t happy with any of them.

Enter Syntax-highlighting Code Block (with Server-side Rendering)

I was reluctant to try YET another syntax highlighting plugin, but this one came recommended from Twitter from Kathy Darling.

just downloaded this the other day, but didn't have much of a chance to test it yet: https://t.co/C3H4f9ZiHB

— Helga stays at home (@Kathy_Darling) September 2, 2020

Here’s a quick Gif of it working with the block editor:

There are some things I really really like about this plugin.

1. It uses the native code block, which means I don’t have to convert the content should the plugin suddenly become unmaintained.
2. It allows a TON of languages
3. Word-wrapping
4. Line-numbers
5. Highlighting certain lines of code
6. Actively maintained by Weston Ruter et al.
7. And it just works!

There’s some things I don’t like about the plugin:

1. No preview of the highlighted code in the block editor
2. Settings tucked away in the customizer
3. Highlighting lines are a bit cumbersome
4. Yes, those are the only things I don’t like

Customization Via CSS

I like to know what language a particular syntax highlighting code block is using, whether it’s on this site or others. Fortunately you can easily tweak it with some CSS (the example below is in SASS and YES it can be optimized):

pre.wp-block-code {
	position: relative;
}
.shcb-language {
	clip: unset;
	clip-path: unset;
	width: auto !important;
	height: auto !important;
	font-family: Ringside Regular A, Ringside Regular B, Rubik, Lato,
		Lucida Grande, Lucida Sans Unicode, Tahoma, Sans-Serif;
	font-style: normal;
	font-weight: 700;
	font-size: 12px;
	color: #fff;
	position: absolute;
	top: 10px;
	right: 0.4rem;
	padding: 0;
	text-transform: uppercase;
	color: #ff8a00 !important;

	.shcb-language__label,
	.shcb-language__paren,
	.shcb-language__slug {
		display: none;
	}
}

Code language: SCSS (scss)

And here’s the result:

Plugin Wishlist

Weston, thank you for the plugin! It works great. Here are a few wishlist items.

1. On the front-end, it would be nice to view the raw code for copying/pasting
2. Adding to that, a copy button would be awesome
3. It seems to choke on long React files in the back-end causing a JSON error (yes, I’m leaving an issue)

Conclusion

I have found an (almost) perfect Syntax Highlighter for Gutenberg. Please share your own experiences with Gutenberg code highlighters or plug your own iteration if that’s your thing.

Cheers! Now go try out the plugin.