Line-numbered code

by truetone

HTML

<pre class=numbered>
   <ol class=line-numbers>
       <li><code><span class=code-comment>/**</span></code></li>
       <li><code><span class=code-comment> * A simple nav abstraction to throw any list into horizontal mode. Here we can</span></code></li>
       <li><code><span class=code-comment> * see we need to use the `*` hack to get the abstraction working in &lt;IE8.</span></code></li>
       <li><code><span class=code-comment> */</span></code></li>
       <li><code>.nav{</code></li>
       <li><code>    list-style:none;</code></li>
       <li><code>    margin-left:0;</code></li>
       <li><code>}</code></li>
       <li><code>    .nav > li,</code></li>
       <li><code>        .nav > li > a{</code></li>
       <li><code>            display:inline-block;</code></li>
       <li><code>           <mark>*display:inline-block;</mark></code></li>
       <li><code>            <mark>zoom:1;</mark></code></li>
       <li><code>        }</code></li>
   </ol>
</pre>

CSS

/*------------------------------------*\
    $CODE
\*------------------------------------*/
/**
 * Use an explicit font stack to ensure browsers render correct `line-height`.
 */
pre,code,samp,kbd{
    font-family:"Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
}
pre{
    padding:24px;
    background-color:#333;
    overflow:auto;
    -webkit-border-radius:4px;
       -moz-border-radius:4px;
            border-radius:4px;
}
.numbered{
    white-space:nowrap;
}
.numbered code{
    white-space:pre;
}
    pre mark{
        background:none;
        border-bottom:2px solid;
        color:inherit;
    }

/**
 * Add line numbers via an `ol`.
 */
.line-numbers{
    list-style:decimal-leading-zero inside;
    margin-left:0;
}

/*
 * Set the colour of the bullets/numbers.
 */
.line-numbers{
    color:#444;
}

/*
 * Make everything (back to) normal.
 */
pre,
.line-numbers code,
.line-numbers li:hover{
    color:#fff;
}

/*
 * Make comments a little paler.
 */
.code-comment{
    color:#999;
}















































*{
    margin:0;
    padding:0;
}
html{
    font:1em/1.5 Georgia, serif;
    color:#333;
    background-color:#fff;
    padding:5%;
}