If your WordPress content includes posts or pages about programming, web design, or other technology topics, you may want to include examples of programming code in languages such as HTML, CSS, PHP, and JavaScript. There are two tags you can use in the default WordPress editor to display code: the <code> tag and the <pre> tag.
The <code> tag
The <code> tag is an HTML phrase tag and is usually used to display short bits of code within a paragraph. By default, text written inside <code> tags is displayed in a monospace font with a light grey background. For example, in a post about JavaScript, you might include a short bit of code like:
var cakename = "Red Velvet";
The <pre> tag
The <pre> tag is a good choice for displaying longer blocks of preformatted text. Like the <code> tag, text written inside <pre> tags is displayed in a monospace font with a light grey background. Text inside <pre> tags are displayed exactly as written, including the line breaks and spaces. Because some programming languages won’t work correctly when line breaks are in the wrong place, it’s important to consider where the line breaks are, especially if you think readers may cut and paste your code. For example, JavaScript displayed inside <pre> tags looks like this:
<script>
function myFunction() {
document.getElementById("demo").innerHTML = Boolean(10 > 9);
}
</script>
The visual editor or text editor?
Before you begin adding code to posts or pages, it’s important to note that using the <code> and <pre> tags has different results depending on which version of the WordPress editor you use. For example, if you write this line of text in the visual editor: <code>This is text written inside code tags.</code>
It is displayed in the published post like this, showing the code tags as part of the text:
If you write the same line of text in the text editor:
It is displayed in the published post like this, with the text formatted in a monospace font and not displaying the tags as part of the text:
HTML entity characters
The code and pre tags work well for displaying simple alphanumeric characters, but what if you want to display HTML tags or other programming syntax within your code tags? For example, let’s say you’re writing a post about how to change the font color of a second-level heading in HTML and you want to display the line shown below, formatted as code:
<H2>This heading is red.</H2>
If you write this in the text editor as:
The published post looks like this:
This is because the web browser assumes that you don’t want to display the HTML code, so it follows the formatting instructions in the HTML code. To work around this, you need to replace the HTML tags with HTML entity characters, which allow you to display HTML code in the browser. In this example, we’ll replace the < and > characters in <h2> and </h2> with the < (<) and > (>) entities.
When we publish the post with entity characters, it looks like this:
Here is another example using a common bit of PHP code. The first block of text is written inside <pre> tags and uses default PHP tags. The block of text below it is also written inside <pre> tags and the PHP tags are replaced with entity characters.
The published post is displayed below. The first block of text isn’t displayed because the web browser is trying to run the PHP code, not display it. The second block, which uses entity characters, displays the text as expected.
Some commonly used entity characters are shown below. To learn more about entity characters, see HTML Entities.
< = < > = > / = / ] = ] [ = [ " = " ' = ' & = &
More information
If you have any questions or need help, you can always contact HostPapa Support by opening a support ticket. Details about how to open a support ticket are here.
