Mimsy Were the Borogoves

Hacks: Articles about programming in Python, Perl, Swift, BASIC, and whatever else I happen to feel like hacking at.

Representing code in HTML

Jerry Stratton, March 14, 2005

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:

[toggle code]

  • ul.code li {
    • list-style: none;
    • text-indent: -2em;
    • margin-left: 2em;
  • }
  • ul.code ul {
    • padding-left: 2em;
  • }

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

[toggle code]

  • ul.code {
    • margin-left: 2em;
    • background-color: #EEEEFF;
    • border-width: .2em;
    • border-style: inset;
    • border-color: #4444FF;
    • width: 90%;
  • }

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:

[toggle code]

  • print '<ul class="code">', "\n";
  • $tabs = "\t";
  • $pci = 0;
  • while (<>) {
    • chomp;
    • if (s/^(\t+)//) {
      • $newtabs = $1;
      • $nci = length($newtabs);
    • } else {
      • $nci = 0;
    • }
    • if ($nci != $pci) {
      • if ($nci < $pci) {
        • while ($pci > $nci) {
          • $tabs = substr($tabs, 0, -1);
          • print $tabs, '</ul>', "\n";
          • $pci--;
        • }
      • } else {
        • while ($nci > $pci) {
          • print $tabs, '<ul>', "\n";
          • $tabs .= "\t";
          • $pci++;
        • }
      • }
      • $pci = $nci;
    • }
    • if (/^\t*$/) {
      • $style = ' class="section"';
    • } else {
      • print $tabs, '<li', $style, '>';
      • s/&/&amp;/g;
      • s/</&lt;/g;
      • s/>/&gt;/g;
      • print;
      • print '</li>', "\n";
      • $style = '';
    • }
  • }
  • while ($pci > 0) {
    • $tabs = substr($tabs, 0, -1);
    • print $tabs, '</ul>', "\n";
    • $pci--;
  • }
  • print '</ul>', "\n";
  1. <- Nutshell Webmaster
  2. Python HTML ->