This extended Code block uses language auto-detection to add syntax highlighting, but you can override the language in the block’s settings sidebar. (There is currently no syntax highlighting of the Code block in the editor.) The plugin supports all programming languages that highlight.php supports (being a port of highlight.js). The Code block also is extended to support specifying the aforementioned highlighted lines. There is also a checkbox for whether to show line numbers on the frontend (with the numbers being non-selectable). Lastly, given inconsistencies across themes as to whether lines in a Code block should be wrapped, this plugin adds styling to force them to no-wrap by default, with a checkbox to opt-in to wrapping when desired.
Just found this gem of a plugin when looking for code syntax highlighting plugins. No hassle at all to get working, just install and activate and it formats and styles existing code blocks in posts.
Could not be happier with this plugin. Wlldone!
I've switched to "Syntax-highlighting Code Block" from a similar plugin, mainly because the old one didn't recognize the new Java Text Blocks.
This one does, and GTMetrix also reports a heavily reduced DOM size for almost all my pages, for example:
from 2,363 elements down to 1,654 elements
from 1,842 elements down to 1,442 elements
That's an amazing and surprising improvement!
I do have one feature request, though:
It would be great if one could select a subset of the available languages for the dropdown, so you don't always have to scroll through all 185 languages.
I just wanted to stop by to say thanks for such a great plugin.
It does the job perfectly for me.
The way you have used CSS allows me to customise the different colours etc for different components and I have even got a dark mode version working (with prefers darkmode CSS).
I really hope you are able to keep this project maintained.
Just saw this plugin in the source code of another developers blog.
I use(d) another block to highlight my code but instantly bought in the idea of server render the code instead of ship JS to my users.
I try to step up my game of resource efficient webdevelopment. So reduce the JS I ship to users - server rendering over client side rendering etc.
So this plugin rocks.
Also I am glad that changing over will be doable. The plugin I currently use let me switch to your plugin without trouble, so this will be a task for every now and then in the next days.
Thanks for this plugin!
Why this plugin is awesome.
2) The plugin adds on top of the existing gutenberg code block. Most of the syntax highlighters out there try to provide their own gutenberg block which makes it difficult to switch between plugins. For instance, I was using code syntax block plugin and I had to go to each post to convert them back to regular code blocks.
3) No client side scripts thus optimal for AMP enabled pages. As your AMP pages get cached on Google AMP cache anyway, your server has to generate pages rarely.
4) More theme options compared to other code block highlighters out there.