Recently, I added a new plugin to this site. This plugin is more robust than the standard Gutenberg <code> block. This plugin is called “Highlighting Code Block” (or HCB for short).
HCB is developed by LOOS Studio. You can find the complete guide about how to use and configure this WordPress plugin on their website. It’s in Japanese tho, but I think the translation feature from my favorite browser, Edge, can translate it very understandable since their writing is using the standard Japanese language.
This code block was first used in my previous post about Docker. There are things I dislike from Guttenberg <code> block in handling block of codes, like:
- Forced removal of white spaces makes code indentation useless.
- Forced to follow the theme CSS.
- And naturally, it doesn’t look like a block of code!
This disappointment toward Gutenberg (vanilla) <code> block made me searching for the alternative. After some difficult choices, my final decision went to the “Highlighting Code Block” plugin. This plugin is available on the official wordpress.org page or you can search it through your “add new” plugin section on your dashboard.
This plugin is so marvelous and I think a must-have plugin for developer blogs. It also powered by a light-weight PrismJS syntax highlighter which supports more than 200 programming languages. Although I didn’t need that much language support, it does help me choose some languages that don’t list in the HCB standard list, for example, YAML. And of course, I can choose which line of code that I want to highlight in each block.
Did I mention block? Yes, this plugin is fully compatible with Gutenberg editor. And for you who still love WordPress classic editor, this plugin also available to be inline with it.
My final verdict: Because I really want to make my website as light as possible both in the engine on server-side and end-user rendering, HCB really helped me a lot in achieving it as it is really light yet powerful. But it also has some ugly side. The first is that its just Gutenberg block is very simple, not that really hinders my way to write codes on it tho. The second, just like the first one, it’s configuration page is also very simple, very straightforward, but very simple just like a classic HTML form.
