How To Display Raw Code On WordPress Blog Posts

If you’ve ever tried to share code snippets in WordPress, then you may have struggled to get them to appear in your published 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. 

To understand the first reason, let’s look at a popular example: bolding text. If you want to manually bold the word “puppy” in your WordPress post, for example, you type <strong>puppy</strong> into your WordPress editor. Easy, right? The issue is that WordPress can’t deduce whether you want to share that code snippet with your readers or if you want to embolden the text. WordPress will interpret the snippet as HTML code, embolden the word “puppy,” and make the code snippet disappear from the published post. 

You might be thinking, “Can’t I drop the HTML tags and just insert the raw code then?” Still no dice. WordPress automatically filters out any raw code it finds as a security precaution. This cleanup filter is meant to keep your site — and WordPress as a whole — safe by prohibiting anyone from injecting code into the post editor and hacking your site.

There are times you legitimately need to display code in your posts though. You may be a marketer who writes web design guides and tutorials, for example, or a developer who writes hacks for WordPress.

Whatever the reason, you have a few options for displaying code on your WordPress site. In this tutorial, we'll show you how. 

Beginners and experts alike use a plugin if they frequently display code and don’t want to spend the time adding code blocks or converting code into HTML entities.

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.

Display Code in WordPress Manually

If you’re a more experienced WordPress user, then you may want to use HTML entities to manually write code. It’s the most lightweight and flexible (and therefore difficult) solution of the three.

HTML entities are a unique way of writing HTML tags that browsers can interpret to properly display the associated 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 tags and HTML character entities. To render code that uses any of these characters, you’ll need to swap the HTML tags on the left of the equal sign with the entities on the right. 

Source

To understand how to use entities to display code on your site, let’s return to our earlier example of the HTML code for making text bold. To share the code snippet <strong>bold text here</bold> rather than actually emboldening the text, you’ll first switch from the Visual editor to the Text editor. In that tab, you’ll replace the lesser than and greater signs with their HTML character entities. It will now look this: &lt;strong&gt;bold text here&lt;/strong&gt; 

Finally, you’ll wrap the snippet in the <code></code>tag. Here’s how it will look in the editor:

Once you save your changes, you can hit Preview to see how the code will appear 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 Using the Gutenberg Editor

If you’re looking for an easier way to display code on your site and have WordPress 5.0 or a later version installed, then you can use the Gutenberg editor to add code blocks with a few clicks of your mouse. The steps are laid out below.

Source

6. You can also type /code and hit enter.

Source

7. Now enter the code snippet in the text area of the block and save your changes. 

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 as you see fit. 

Source

The code block does not support additional settings or formatting styles. For an easy workflow with more flexibility, you can use a plugin. 

Display Code in WordPress Using a Plugin

Using a plugin has a few advantages over the other two options. It allows you to easily display any code in any programming language with syntax highlighting and line numbers. As a result, your visitors will be able to more easily read and copy that code.

To post syntax-highlighted code, you can use the Syntax Highlighter Evolved plugin. It’s free, easy to use, and compatible with the classic editor and the Gutenberg editor. Below are the steps using the Gutenberg editor. 

1. First, log into your WordPress dashboard.
2. On the left side of the page, click Plugins > Add New.
3. In the search box, enter "Syntax Highlighter Evolved."
4. Click Install Now > Activate.
5. Once it's activated, go to Settings > Syntax Highlighter Evolved.
6. Review and adjust the settings as you see fit then click Save Changes.

Source

7. Now click Posts or Pages from the sidebar on the lefthand side of the page. 
8. Select Add New or hover over an existing post or page and select Edit. 
9. Click the Add Block icon and search “Syntax Highlighter Code.” 
10. Enter your code into the code block.
11. Select your block settings from the right column.

a. Select the language for your code.
b. Turn line numbers on or off.
c. Provide the number of your first line of code. 
d. Highlight any line you want.
e. Make links clickable.

Source

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

• [html] [/html]

• [css][/css]

• [sql][/sql]

• [javascript][/javascript]

You can then save and preview your draft to see how the code will appear to visitors on your site. A demo of how some CSS code will show on a live site is shown below.

Source

Now that you know the different options for displaying code in WordPress, you can take your web design guides and tutorials to the next level. Your readers will thank you.