Gutenberg, Code, and Highlighting

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;
}Code language: PHP (php)

While this is acceptable, it’s not very pretty.  I used to use the SyntaxHighlighter EvolvedUnfortunately 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;
}Code language: PHP (php)

I really like this and I think it compliments Gutenberg nicely 🙂

Other Posts Not Worth Reading

Hey, You!

Like this kind of garbage? Subscribe for more! I post like once a month or so, unless I found something interesting to write about.


Comments

4 responses to “Gutenberg, Code, and Highlighting”

  1. 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.

    1. That’s awesome! Thanks for sharing 🙂

      Hopefully it’ll be on by default in the future.

    2. Uhh, we are talking about Gutenberg for WordPress right, not a completely different CMS (which that is)?

      1. You are correct! I didn’t read deep enough, and that is not for the new WordPress editor 🙂

Leave a Reply