Display code on your WordPress post

Table of Contents

Why I Wrote This

When I first started writing technical blog posts on WordPress, I kept running into a problem that felt embarrassing to admit: my code examples looked terrible. Angle brackets disappeared, PHP tags got stripped, and indentation collapsed into a single line. I was copying code directly from my editor into the WordPress visual editor, which was silently mangling everything.

The root issue is that the WordPress editor treats everything you type as HTML. Angle brackets are parsed as tags, <?php gets swallowed, and any character with special meaning in HTML (<, >, &, ") has to be escaped before you paste it. I did not understand that distinction until I wasted a few hours wondering why my code samples looked fine in the editor but broken on the published post.

The HTML entities approach I cover here — encoding the code first, then pasting — is old-fashioned by today’s standards. Modern WordPress (Gutenberg) has a native Code block that handles this automatically. But I was on the Classic Editor at the time, and a lot of self-hosted WordPress installs still use it. The manual encoding approach is also useful if you are writing in raw HTML mode and want to understand what is actually happening under the hood.

Many bloggers do not run a development blog, so they don’t need to add sample code snippets in their posts very often. For rare occasions, you can add code by encoding the code into HTML entities. Like this &gt;?php echo "Hello World"; ?&lt;

Why Displaying Code is Difficult

To understand why displaying code is difficult you need to know some basic HTML. The code for making some bold text is to surround it in a tag. To create the bold text in that sentence I actually wrote <strong>bold text</bold> into my WordPress editor.

Showing code on your site can be tricky if you don’t know how. So far so good, but now for the hard part: What if I want to show you how I did it?

Any time I type <strong> into the editor it gets interpreted as HTML code, which means it will disappear and instead be used to embolden the text.

How to display code block

The problem with converting code into HTML entities is that it is difficult to do manually. You can use online tools like this one, to convert code into HTML entities.

By converting PHP, HTML, JavaScript code into HTML entities, you can paste them into your WordPress posts. For additional styling you can wrap code between <code> and </code> tags.

Here is the tutorial on how I added a code block in my previous blog Configure virtual host on CentOS.

  • Copy your code and encode it from this one.

  • Switch your editor to text from visual and paste encoded code in between <pre></pre> tags.

  • Add following css to enhance code block styling

pre { background: #fafafa; border: 1px solid #eaeaea; padding: 10px; }
  • This is how your code block will look like
<html> 
<head><title>Welcome to Example.com!</title></head> 
<body>
    <h1>Success! The example.com virtual host is working!</h1>
</body>
</html>

We hope this article helped you find the best syntax highlighter plugin for WordPress. If you like this article than please follow me on twitter