How to Include Code Snippets in the WordPress Block Editor

Published in WordPress.

The WordPress block editor, also known as Gutenberg by its codename, continues to monopolize much of our blog posts. But what do you expect us to do if new things appear about it in the news on a daily basis? 😄

We were promised that everything would be easier with Gutenberg. But if you have a blog in which more than once you talk about technical issues, you’ll probably need to include code snippets (PHP, JavaScript, and so on) within your content. Is this now easier than with the classic editor?

The answer depends on the taste of the writer, but in my case I’d say “yes”. Nowadays including code snippets in the posts of our blog it’s easier than with the classic editor. But I will also tell you that it has required a previous effort on our part. Let’s see what I mean…

To include code snippets into the classic editor you may follow several different paths. One of them was to put the code fragments between the HTML labels <pre> and </pre>. This is useful in the case of code fragments that occupy multiple lines.

If you only wanted to add a bit of code composed of just a few words, you could insert the code between <code> and </code> tags. Something, by the way, very easy to do selecting the code with your mouse and using the keyboard shortcut ctrl + alt + x in Mac OS X to wrap it with the code tag.

Another option was to use a third-party shortcode or a plugin that would help us include code snippets and highlight its syntax. Among the most popular plugins for this we have Syntax Highlighter (now called Syntax Highlighter Evolved).

I remember that we had used this plugin on our website for code syntax highlighting some time ago. The good news is that it has now been updated and includes support for adding blocks of code in the WordPress block editor.

The SyntaxHighlighter Evolved plugin allows us to add blocks of code in Gutenberg to include code snippets in our posts and pages.

But… does not already Gutenberg include a block of code by default? The answer is yes, but this block of code that the block editor provides does not highlight the syntax of your code. It simply uses a monospaced font and does not create a new block when pressing the enter key but a new line. Apart from that, it behaves like a paragraph block.

If you have the need to add code snippets in your content, it is much more recommended to use the block from the SyntaxHighlighter Evolved plugin instead of the default code block of WordPress.

I don’t want to stop mentioning that the source code of the SyntaxHighlighter Evolved plugin was made by Alex Mills, who recently left us after losing the battle against leukemia. The adaptation to the block editor was done by Ian Dunn, as you can see here.

¿How do we Include Code Snippets in Nelio?

After trying different ways to include code snippets in WordPress over time, we have finally opted for writing the code snippets directly in Gist and create an additional block to import the Gists in the block editor.

Gist is a free GitHub service for hosting code snippets. Here is an example of the final result of a Gist block that includes PHP code:

What we like most is the syntax highlighting and the fact that if we have to make changes we can make them directly in the Gist (on the GitHub website) and everything is automatically updated on our website without having to re-apply the changes there.

In the block editor, our Gist block allows us to include the URL of the Gist and from there it is able to extract the different code snippets that the Gist contains to show them all or just one of them. All the additional options have been put in the sidebar of the block, as you can see below:

Use of a Gist block to include snippets of code in our entries.
Here you can see what a Gist block looks like in the block editor and the options it provides in its sidebar.

For the creation of this Gist block we have been inspired by the GhostKit block collection, which has many other block types. I encourage you to take a look at it.

If you want us to upload this block to the WordPress plugin directory, you can send us some love on the comments area. And if you also include code snippets in your content in some other way, we’d like to read your experience on how you do it 😉

Featured image from Chris Ried on Unsplash.

PoorNot badGoodGreatExcellent (No Ratings Yet)
Loading...

Leave a Reply

Your email address will not be published. Required fields are marked: •

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.