The new WordPress editor Gutenberg has been launched and in case you are writing posts that need to display various code or commands you may want to be properly formatted.

By default, Gutenberg is having a code block that you may use to display code but is not highlighting the syntax, so in case you may want to add a PHP code for an example it will look like below:

<?php
$color = "red";
echo "My car is " . $color . "<br>";
echo "My house is " . $COLOR . "<br>";
echo "My boat is " . $coLOR . "<br>";
?>

As you can see the code is not looking nice at all and attractive for your visitors. To be nicer and look better you may want to be displayed as below:

<?php
$color = "red";
echo "My car is " . $color . "<br>";
echo "My house is " . $COLOR . "<br>";
echo "My boat is " . $coLOR . "<br>";
?>

As you can see the design is changed completely and now the code is displayed nicely and looks good. In the below article I will show how you can easily change the default code block to show the highlighted syntax for a code you may want to use it on your WordPress blog.

How to Display Code in WordPress With Gutenberg

Having this done it is very easy and you can accomplish this with the help of a WordPress plugin. There are a few WordPress plugins that exist and can add a syntax highlighter to your WordPress default code block.

They are offering support for a lot of languages ( more than 50) so no matter of the language you decide to use in the example it will look nice.

What to look in choosing the Perfect WordPress Syntax Highlighter Plugin

To be light

I need a plugin that will not a lot of files to my blog to make it slow. The lighter it is the better.

To offer support for more codes

I don’t want to add a plugin for every code snip that I want to insert, I want to have 1 plugin with support for many languages.

To Be Secure

There are a lot of vulnerabilities in WordPress plugins and you need to be careful with what you choose. You should not choose a plugin that was not updated for a long time.

Having the above in mind the recommended plugins to be used to display code in a WordPress post with Gutenberg editor are:

• Code Syntax Block – this uses JS to highlight the block and extends the initial block.
• Syntax Highlighter Evolved – this is created a custom block

Steps to do

Step 1: Install the plugin

To install the plugin you first download it from GitHub ( the Code Syntax Block )

Then you navigate to Plugins – Add New in WordPress dashboard and hit upload plugin in the top bar and then choose file and install:

For the second plugin you just go to Plugins – Add new and search for it and hit install and activate:

Step 2: Add a block and format it for the code you want.

Now as the plugins are installed you need to add the code block and format it. To do this you add the block by searching it and click on it:

In the right side you have the block options from where you choose the language and the option to choose lines or not:

Now at the end when you hit preview the code block will be properly formatted.

Video With The Steps