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;
}

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.

A WordPress plugin which extends Gutenberg adding color syntax highlighting to the code block.
https://github.com/mkaz/code-syntax-block
37 forks.
230 stars.
30 open issues.
Recent commits:

• Restore default theme path to assets/prism/prism.cssWith the user option to set the path, and changing to a11ytheme had the unintended consequence of changing where themeslook for the default prism path. Restores to previous state.Fixes #92, Marcus Kazmierczak
• Bump version to 2.0.2, Marcus Kazmierczak
• Restore assets/prism.css for backward compatibility, Marcus Kazmierczak
• Add action for asset only changes, Marcus Kazmierczak
• Upgrade packages, Marcus Kazmierczak

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 🙂