While converting one of my older reviews of a programming book, most of the code examples I used were either enclosed in a PRE tag or in a BLOCKQUOTE tag with a bunch of BR tags to break the lines up. More recently, I’ve tried enclosing programming examples in a paragraph or blockquote with a special style attached to it setting white-space to pre.

I’ve never particularly liked either solution and because of that this blog doesn’t support either of those options particularly well. I wrote this software and I don’t like untagged text.

My first thought was simply to make a div.code style that doesn’t mean anything but would indent correctly. While working on that, I remembered Mark Newhouse’s article about how lists are underrated in HTML.

It occurred to me that HTML already has a tag that is practically designed for the display of programming code. Programming is nothing more than a list of instructions for the computer to perform. The HTML list tags, UL and LI, work perfectly for displaying programming code.

In the past, this didn’t work because the list tags would put a bullet next to each line of code. Today, however, we can use style sheets to rid ourselves of the bullet.

This style example will remove the bullet and cause code which wraps to be indented two em-spaces:

If you want the code example to be set off, you can give it a margin and a border, and reduce the width:

This treats program lines as exactly what they are: a list of items. Programming code is a list of instructions, and CSS code is a list of rules.

Scripted conversion of code for display

Here’s a Perl script that will convert code to a list for display. I use it with SilverService on Mac OS X to easily convert a script into a list: