Display HTML Code in WordPress: Here Are 3 Ways How to Do It

If you have a technical blog, there may be occasions when you need to display HTML code in your posts. For example, you might want to share a few coding hacks with your readers, and you might be looking for the best way to do this.

The good news is that displaying HTML code in WordPress is super easy. Plus, you have several options to choose from. You can use native blocks or third-party tools to insert code into your posts and pages.

Why display HTML code in WordPress

HTML is the standard markup language for web pages. You can use it to create websites or add new elements to an existing one.

If you’re a technical writer, you may need to share snippets of HTML code with your readers. For example, to show them how to build a landing page or edit a WordPress file.

In fact, here at Themeisle, we often display HTML code in our WordPress tutorials:

Most readers 📚 will want to copy this code and use it on their own devices. Therefore, it’s important that it’s presented clearly. Preferably, it should be inserted as a separate element so that it doesn’t blend into the surrounding text and confuse your readers.

How to display HTML code in WordPress posts and pages?

Now, let’s look at the ways to display HTML code in WordPress. All methods are super easy, though the first one is possibly the quickest.

1. Use the native code features in the Block Editor
2. Use a dedicated plugin
3. Embed HTML code from third-party tools

1. Use the native code features in the Block Editor 👨‍💻

The WordPress Block Editor offers two main ways to display HTML code in your posts or pages.

The first one is using the Inline Code formatting option.

Start by writing your code on the page. As you may notice, each line will appear as an individual paragraph block – don’t worry, we’ll show you how to fix this in a moment:

Now, click on each paragraph block (or line) and select the More icon from the toolbar. You should see an option called Inline code – go ahead and click on it:

Once you’ve done this for each line, select the entire code and click on the Stack icon in the toolbar:

Now, here’s what this HTML code may look like on the front end:

This method may be a little time-consuming if you have a large piece of code. In fact, we only recommend it for short snippets.

However, you can use the Code block instead:

⚠️ Note that this is different from the Custom HTML block. The latter is used for adding HTML code to display a particular element (such as a widget or photo) on the page.

Enter the code you want to display into the block:

If you select the Style icon in the Settings panel, you can change the color of the text and background, and customize the typography:

Here’s what it might look like on the live post:

As you can see, using the Code block can be an easy and quick way to display HTML code in WordPress posts! 🤩

2. Use a dedicated plugin 🔌

You can also display HTML code in WordPress with a plugin like Highlighting Code Block. This tool enables you to insert the highlighted code into your posts and pages.

To get started, install and activate the plugin on your site:

Then, open the post or page where you want to display the code and look for the Highlighting Code Block:

You can then enter your code into the block. You can also choose the language from the dropdown menu:

Let’s see what this will look like to your readers:

As you can see, the HTML tags have a different color from the input text, which makes the code easier to read. Additionally, there’s an icon at the top right-hand corner you can click on to highlight the entire text:

This makes it easier for users to copy the code. 😎

3. Embed HTML code from third-party tools ⚙️

Some online code editors like CodePen enable you to embed code into your WordPress posts or pages. If you want more control over the presentation of your code, this might be the best option for you.

You can start by writing and customizing the HTML code in CodePen:

Then, save your work and copy its URL. Open the page or post where you want to display HTML code, and add the Embed block:

🏁 Finally, enter the URL from CodePen and hit Embed. The embedded code may look something like this:

As you may have noticed, users can view both the HTML code and the result. This could make it easier for them to follow your tutorials and cross-check their work.

Conclusion 🧐

To recap, here are three ways to display 🖥️ HTML code in WordPress posts and pages:

1. 👨‍💻 Use the Code block and Inline Code formatting in the Block Editor.
2. 🔌 Use a dedicated plugin like Highlighting Code Block.
3. ⚙️ Embed HTML code from third-party tools like CodePen.

Do you have any questions about how to display HTML code in WordPress posts and pages? Let us know in the comments section below!