WordPress Code Blocks: How to Display Code in WordPress Blog Posts

If you’ve ever tried to share code snippets in WordPress, then you may have struggled to get a WordPress code block to appear in your pages and posts.

You’ll be happy to know that it isn’t due to an error on your part. There are two explanations for why your code snippet isn’t rendering:

• If you try to write HTML tags in the body of your post, WordPress will interpret these as functional tags, not as a code snippet that you want to be displayed. For example, if you write “<em>example</em>” in your post, WordPress will display “example”.
• You can’t insert HTML tags in the source code of the page because WordPress automatically filters them out as a security precaution. It prevents hackers from injecting code into the post editor.

However, there are times you legitimately need to display code in your posts. For instance, you may blog about coding, or you may be publishing documentation for a theme or plugin you developed. Whatever the reason, you have a few options for displaying code on your WordPress site.

We’ll discuss each of these processes in detail below so you can choose the method that best meets the needs of your WordPress site.

How to Display Code in WordPress With the Gutenberg Editor

If you want an easy way to display code on your site and have the Gutenberg editor enabled, you can add code to your page or post with a dedicated block. Here's how:

1. In your WordPress dashboard, click Posts or Pages.

2. Select Add New or hover over an existing post or page and select Edit.

3. Place your cursor where you want to display the code.

4. Click the Add Block icon (the plus sign) and search for "code". Select the code block when it appears.

Alternatively, you can type "/code" and hit enter.

7. Enter the code snippet in the text area of the block.

8. If you preview the post, you'll see that the code is displayed in its own block.

The appearance of the code block on your site will vary depending on your WordPress theme. To modify its appearance, you can write custom CSS in the sidebar to style the block. Select the block, then in the settings menu click Advanced to display the custom CSS field.

However, note that the Gutenberg code block does not support additional settings or formatting styles. For an easier workflow with more flexibility, you can use a WordPress plugin to add code blocks.

For a video explanation, check out this great tutorial from Elegant Themes:

How to Display Code in WordPress Using a Plugin

Using a plugin has a few advantages over other approaches. First, it allows you to display code in any programming language with syntax highlighting and line numbers. Visitors will be able to more easily read and copy the code.

A plugin is also easier for your workflow if you frequently display code blocks in WordPress and don’t want to spend the time adding code blocks.

To display syntax-highlighted code, you can use the Syntax Highlighter Evolved plugin. It’s free, simple, and compatible with both the classic editor and the Gutenberg editor.

Below are the steps using the Gutenberg editor:

1. Install and activate the Syntax Highlighter Evolved plugin.

2. Once it's activated, go to Settings > Syntax Highlighter Evolved in your dashboard.

3. Review and adjust the settings as you see fit, then click Save Changes.

4. Select Posts or Pages from the dashboard.

5. Select Add New or hover over an existing post or page and select Edit.

6. Click the Add Block icon and search “Syntax Highlighter Code.”

7. Enter your code in the code block.

8. Select your block settings from the right column. (Click the gear icon in the top right corner to display settings.)

• Select the language of your code (plain text by default).
• Toggle line numbers on or off.
• If displaying line numbers, choose where the numbering starts.
• Choose any specific lines to highlight.
• Toggle whether URLs are clickable or not.

If you’re using the classic editor, the first four steps are the same. Once you’re in the post or page where you want to add code, click the Text tab to switch to Text Editing mode. Then, simply wrap your code with the correct language shortcode. Some of the most commonly used shortcodes are:

• [html] [/html]

• [css][/css]
• [javascript][/javascript]

• [sql][/sql]

You can then save and preview your draft to see how the code will appear to visitors on your site. Here is a demo of how some CSS code will display on a live site:

Image Source

How to Display Code in WordPress Manually

If you’re a more experienced WordPress user, you may want to use HTML entities to manually write code. This the most lightweight and flexible solution of the three, but it's also the most difficult.

HTML entities are a unique way of writing HTML tags that browsers can interpret to properly display characters. In other words, they allow you to put code on your site that looks like code but doesn’t behave like code.

Below are some of the most common HTML entities. To render code that uses any of these characters, swap the character on the left with the entity on the right.

Image Source

To understand how to use entities to display code, let’s try to display a code snippet that demonstrates the <em> HTML tag.

To display the code <em>example</em> rather than actually italicizing the text, first make sure you're using the classic editor. In your post, switch from the visual editor to the text editor. In the text editor, you’ll replace the less-than and greater-than signs with their HTML character entities. So, your code snippet will now look this: &lt;em&gt;example&lt;/em&gt;

Finally, wrap the snippet in <code></code> tags, then in <pre></pre> tags to create the gray block. Here’s how it should look in the editor:

Save your changes, then select Preview to see how the code appears to visitors on the front end of your site.

This method is fine if you’re adding a line of code here and there. If you’re looking for an easier way to write and post multiple lines of code, you can use an online HTML entities encoder like Web2.0Generators. Simply input your code and hit the Encode text button. It will convert your code into HTML entities, which you can add in between the <code></code> tag.

As you might have already guessed, the more regularly you display code on your site, the less attractive this option becomes. You’ll want to explore the other two options to find the best solution for your site.

Display code in WordPress.

As with many things in WordPress, there is more than one way to show code blocks to your readers, and the best method depends on how frequently you'll use it, how comfortable you are with code, and whether or not you're willing to install another plugin.

Whichever method you pick, code blocks will take your web tutorials to the next level, and your readers will appreciate it.

Editor's note: This post was originally published in October 2019 and has been updated for comprehensiveness.