You probably already know this, but I design websites. While the aesthetics and functionalities differ from one site to the next, I often end up reusing various snippets of code. But because I don’t have an organised collection of these pieces of code, I inevitably end up wasting time writing code from scratch or scouring the net looking for it. So, until I get around to creating my design notes blog, I’m going to be posting those pieces of code here.

*

Line numbers are integral to deconstructing and understanding any piece of code – they make specific bits and pieces in a block of code easy to pinpoint. So when being explained on the web, code needs to be presented with line numbers. However, there is currently no way to simply and automatically number lines with XHTML/CSS – unless you use <ol>, the numbered list tag, with every every individual line of code enclosed in its own <li> tag.

That awkwardness aside, you can create something that looks like this:

pretty code

Pretty, isn’t it? I first saw this particular style at 24 ways. Whipping up the code wasn’t difficult.

My HTML is:
<ol>
<li><code>I like to think</code></li>
<li><code>that Rumi would have been</code></li>
<li><code>a fan of Helvetica.</code></li>
</ol>

And my CSS is:
ol {
width: 400px;
border: 1px solid #E4F2F7;
padding: 5px 10px;
margin: 50px auto;
padding-left: 30px;
font-size: 15px;
}
li {
margin: 5px 0;
}
code {
display: block;
background: #E4F2F7;
padding: 5px;
font-family: Helvetica, Arial, Verdana, sans-serif;
}

I’m not going to bother updating the CSS stylesheets for this blog just yet. But for now you can see the difference, right? I just don’t like how much clunkier it makes the HTML.