Displaying code in your blog entries

by Richard Hooper

Creative Commons licensed photo
Photo by PapaPaolo

Many bloggers have experienced the frustration of getting code to display properly in their blog entries. Instead of displaying the code, WordPress executes it.

There is a simple method which will display your code as code—no plugins required.

In days gone by there was the (now depreciated) <xmp> tags. Code enclosed within <xmp> tags would be displayed “exactly” as it was entered.

…putting code in your post that “looks” like code, but “doesn’t behave” like code, is a frequent challenge for bloggers.

For example, this code:

<xmp>
<b>Hello World</b>
</xmp>

Results in the following:

<b>Hello World</b>

Heaven forbid that we use depreciated tags in our valid XHTML blogs! Instead, we can trick WordPress by “disguising” the code so it will be displayed as code.

There are a few WordPress plugins that take care of this, however, I haven’t found any which work flawlessly, or any that work exactly the way I want them to. So I use the <code> and <pre> tags and convert characters like < and > so WordPress doesn’t “see them” as HTML references.

The <pre> </pre> tags

The <pre> tag defines preformatted text, preserving line breaks and spaces and rendering text in a fixed-pitch font.

Aside from that, the <pre> tags behave much like <code> tags.

Contrary to some reports, <pre> does not strip out HTML references. You must convert certain characters in order to display code instead of executing it (explained below).

The <code> </code> tags

The code tag will render text in a mono-pitch typeface. Line breaks and spacing are not preserved and HTML references are acted upon.

For example, writing this line of code in your post:
<code>”This is code…”</code>,
results in this being displayed: ”This is code…”

That may be useful for displaying certain text, but what if I want to display the above line of code exactly as it was written, including the <code> tags? Like so…

To achieve this, we need to use HTML “character entities” in place of the <> characters.

This is because WordPress will treat the HTML tags literally and execute it as HTML. To avoid that and make WordPress display the HTML tags, you have to convert < to < and > to >.

So to display this line of code in your post:
<code>”This is code…”</code>,
you would type:
<code>”This is code…”</code>

It’s that simple. Now add CSS styling to your <code> tags to display the code in your preferred size, color and font.

Converting HTML character entities

To display HTML character entities, you can enter the HTML number (e.g.: ") or the HTML name (e.g.: ").

To display < type <
To display > type >
To display / type /
To display [ type [
To display ] type ]
To display $ type $
To display ” type "
To display ‘ type '

Do it all with Quicktags

In an earlier post I discussed taking control of the WordPress post editor and adding custom buttons (Quicktags). I find this helpful for quickly inserting <code> and <pre> tags as well as inserting special characters (<, >, <, >) wherever I want.

Conversion tool

If you’re not into manually converting special characters, check out HTMLizer. Simply paste your code into the box and press the button, to turn this:

</head>
    <?php wp_head(); ?>
<head>

Into this:

&lt;/head&gt;
    &lt;?php wp_head(); ?&gt;
&lt;head&gt;

Which when placed in a post, looks like this:

</head>
    <?php wp_head(); ?>
<head>

Once you understand why code isn’t displayed in your blog entries, it’s easy to make it happen. No plugins required and you maintain complete control.

References:
• HTMLizer
• HTML character entities
• Quicktags

If you found this article useful, please comment, share, or subscribe.

Comments

Michael Martin

I’ve been frustrated by this quite a few times. It’s a pain! Do you know of any good code highlighter plugins? :)

Richard Hooper

Michael, if you’re looking for syntax highlighters, there are several listed here. I haven’t tried any yet, so if you find an exceptional one it would be nice to know.

Vijay Pathak

how u r using this Featured “Articles”
can u please explain me i am also want to use this same feature?

Richard Hooper

Vijay,

This post has the answer you’re looking for.

Have your say

(You'll have 5 minutes to edit your comment after it's submitted)