One of the great things about Gutenberg is the ability to compartmentalize different types of content within blocks. One of the blocks that I’ve been using a lot of recently is the code block. This block by default will render something like this:
#include "stdio.h"
int main()
{
// printf() displays the string inside quotation
printf("Hello, World!");
return 0;
}
While this is acceptable, it’s not very pretty. I used to use the SyntaxHighlighter Evolved. Unfortunately this doesn’t work perfectly with Gutenberg at the moment, and I was hoping for something in a block. Luckily I found this…
UPDATE: SynxtaxHighlighter Evolved now works with Gutenberg, but I still like how code-syntax-block works with the core block and isn’t a block of its own.
Marcus Kazmierczak has made a plugin to extend the core code block to allow syntax highlighting:
#include <stdio.h>
int main()
{
// printf() displays the string inside quotation
printf("Hello, World!");
return 0;
}
I really like this and I think it compliments Gutenberg nicely 🙂
4 replies on “Gutenberg, Code, and Highlighting”
According to these docs, Gutenberg already includes highlighting. https://www.getgutenberg.io/documentation/content/syntax-highlighting/
But, you need to enable it by editing the Gutenberg files.
That’s awesome! Thanks for sharing 🙂
Hopefully it’ll be on by default in the future.
Uhh, we are talking about Gutenberg for WordPress right, not a completely different CMS (which that is)?
You are correct! I didn’t read deep enough, and that is not for the new WordPress editor 🙂