Posting HTML Code on Blogger

If you want to show some example code in a Blogger post, you can't just type in the code because the HTML will be interpreted by the browser and your example code won't show up. So for example, say you wanted to post this:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

But you end up with your post looking like this:

• Item 1


• Item 2

The solution is to use HTML "character entities". These are character sequences that replace the angle brackets and other symbols so that the browser will render the represented character rather then interpreting it as part of an HTML tag. Using character entities the less-than angle bracket, <, is written as: &lt;, and the greater-than, >, is written as: &gt;

You'll also want to enclose the code example within a <pre> tag. This tells the browser that the enclosed text is "preformatted", so that white space and line breaks should be preserved rather than running everything together in the usual HTML normal flow.

Finally, if you think replacing all those angle brackets sounds like a pain, you can try out a handy converter tool I wrote at: http://tools.cssrule.com. To use it just paste in the HTML code you want to show, press the Convert button, then copy and paste the converted code into your post.