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.
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.
Nelio Content
I’m so happy about Nelio Content that I will sound like a payed advocate… but here’s why you’ll love it: it works as promised, its auto-scheduling feature is top-notch, Nelio’s value for money is unmatched, and the support team feels like your own.
Panozk
¿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:
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.
Leave a Reply