How to Show Code in Gutenberg Blocks

The Gutenberg editor delivered a lot of cool improvements for WordPress users. One of these is that it’s now much easier to add code your WordPress posts.

I’m going to show you two ways to add code in Gutenberg. The first option allows you to add whole blocks of code. The second option allows you to highlight code inside paragraphs.


Option #1: The Code Block

The “Code” block is the simplest option. It is best used when you want to display a chunk of code together, separately from any other text on the page.

Gutenberg code block

Option #2: The Paragraph Block

This option gives you a little more control. For example, you can highlight only some text in a paragraph and mark it as “code”.

First, add a new “Paragraph” block in Gutenberg:

Gutenberg paragraph block

Next, add a little text or code to your new block:

Select the code with your cursor:

Use the toolbar above your block and look for the small down arrow. Click “Code”.

You’ll see that your code is now formatted with a grey background:

Publish your post and your code will appear with some basic formatting.

I was surprised to see this extra Code display option in Gutenberg, and I’ve been using Gutenberg for nearly a year now!


Get the PublishPress plugins

The Pro versions of PublishPress plugins are ready for Gutenberg. They packed with extra features to help you manage your content. Get a PublishPress membership today for full access:

Leave a Reply

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

Professional publishing plugins for WordPress! Get PublishPress