Display code on your WordPress post
Fri Jan 27, 2017 · 329 words

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 >?php echo "Hello World"; ?<

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.

pre { background: #fafafa; border: 1px solid #eaeaea; padding: 10px; }
<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


back · posts · who is yuvi? · contact · home