How to Convert Code to Display Correctly in XHTML Pages

Posted on February 6th, 2008 by Partner

INDEX for “XHTML Help” Series:

Strict, or Loose with your DTD Standards?
XHTML Learning Chart…
Start Your Design with XHTML Templates
How to Convert Code to Display Correctly in XHTML Pages

If you’ve ever stumbled when you’re writing an article about code and coding techniques because you can’t get the code to display right on your page — no worries. I’ll give you some tips and tricks here. You’ll learn the long way to do it (every good Open Source WebMaster — BlogMaster too — should know their ASCII codes), and a couple of shortcuts.

by Scott Frangos, Managing Editor - WebHelperMagazine.com

Have you ever wanted to display code, complete with brackets and all special characters in place, in a blog post or on a web page, but your editing program just won’t let you?

“Mathematical and musical notation, and some shapes and arrows can only be displayed properly using XHTML. And, that’s one of several good reasons to learn and use XHTML.”

Let’s say you want to explain to your reader how to write the code for an “iframe”, like this:
<iframe src ="http://webhelperjobboard.com/" width="100%" height="270"> </iframe>

So you type it as it looks, preview it in your browser or editor…but you get something like this:

Hmmm… what’s happening? Well, your browser is interpreting the code — as code. And, it’s generating the iframe (in this example), just as you told it to do. This happens to BlogMasters a log, and in fact the example was typed in using the WordPress code editor. What to do now?

The Solution…

Ok. The first thing you should do is hop on over to an XHTML Character Reference chart site — like this one, and look at how to actually write the code for a character, instead of typing the symbols themselves:

Character reference chart for XHTML
Above, is a chart of XHTML Character References at DigitalMediaMinute.com.

Look like a lot of stuff to memorize? Not really. Most of the time all you need to know is the code for the starting and ending brackets (the Less Than sign and the Greater Than sign), and the code for quotes. And the chart you see above has a button you click to get “markup significant” characters and their corresponding code. When you click it, you’ll see just four entities: the open and close brackets, quotes, and the Ampersand symbol (&):

Markup Significant XHTML Character Entity Reference

See those notations below the symbols? That’s how you get them — to get the Quote, Ampersand, Less Than, Greater Than sign, you would write:

&quot;  &amp;   &lt;   &gt;

What about all of those other symbols? You can use them too — when you need them. But… there’s a catch. Mathematical and musical notation, and some shapes and arrows can only be displayed properly using XHTML. And, that’s one of several good reasons to learn and use XHTML. C’mon, don’t be afraid of the “X” — it’s your friend. It stands for eXtensible, and a large part of the web’s future (like the mobile web) depend on it.

XHTML Codes in WordPress

Are you a WordPress BlogMaster? You’re in luck. Not only is WordPress coded to comply with XHTML standards, but there are also a number of plugins you can use to help you with conversions.

Here are a couple of WordPress code conversion plugins you can compare:

SemCodeFix: A plugin to display preformatted code in WordPress
Code Markup: a WordPress plugin that makes it easy to include program code samples in your posts.

ShortCuts…

Finally, I told you I would give you a shortcut. It’s really for lazy WebMasters and BlogMasters who don’t want to learn the conversion codes already given… and I know they will be… well… too lazy to read this far, so it’s ok if I tell you.

The simplest and most elegant is at “Postable” (by Elliot Swan). You just paste in the code you want converted, click “make it friendly”, and there it is for you ready to copy and paste back into your document:

Postable code converter

Then, when you need a code converter on steroids, try the “Unicode Code Converter v6″ by Richard Ishida. Heck, it even converts into Hexidecimal code points, but for our example paste the code to convert into the first field at top left, and use the output from the top right field:

Unicode Code Converter v6

There you have it… now, you’re armed and ready to convert code so you can write your own tutorials, and explain how code works for your readers. Remember, “chew the web, and you will be its Master.”

About the Author: Scott Frangos is a web developer, college instructor, and technical writer. Nowadays he chews through the web as Managing Editor for WebHelperMagazine.com, and builds CMS websites using WordPress at WebFadds.com. He is available for technical writing, blogging, CMS website development, and consulting assignments. Before all of that, he used to churn out copy on a manual typewriter, remember those days?