Tag: code-block

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 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
57 forks.
324 stars.
38 open issues.

Recent commits:

• Bump to v3.2.1, Marcus Kazmierczak
• Reduce specificty for wp-block-code styles (#141)Moves padding, margin, border styles to :where() selectorto allow for theme.json to override.Fixes #140, GitHub
• Improper props, Marcus Kazmierczak
• Bump to v3.2.0, Marcus Kazmierczak
• Fixed showing content in single line in WP 6.5 (#138), GitHub

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 🙂