CSS Line Numbering

I will describe how I use CSS to number lines of code for display.

To use this, you will create a <pre> class with the name of 'code-highlight' and enclose each line of code within <code> tags like so:

<pre class='code-highlight'>
<code>#include <stdio.h></code>
<code></code>
<code>main(){</code>
<code>    printf("hello, world\n");</code>
<code>}</code>
</pre>

Which will display the following:

#include <stdio.h>

main(){
    printf("hello, world\n");
}

Warning

You will not be able to just paste in code as it is, you will need to encode special characters such as < or > before you wrap the <code> tags around the code itself, this will prevent the browser from trying to interpret the characters as special formatting.

I recommend you paste your code into a website that will encode the text for you such as HTML Entities or if you use Sublime Text as your text editor you can select the block of text and then open the command palette using CTRL+SHIFT+P or CMD+SHIFT+P (on OS X), then if you type enc you should see an option listed as HTML: Encode Special Characters which will encode the text for you.

You will also need to escape any escape characters (use double slashes) such as the slash in front of the n on line 5 of first example.

The easiest way to enclose each line of code inside <code> tags is to select every line of code in Sublime Text and then press CTRL+SHIFT+L or CMD+SHIFT+L (on OS X), this will allow you to edit multiple lines of code at the same time. You can then press END and then type in </code> then press HOME (you may have to press it more than once if there are tabs at the beginning of your code to force the cursors to the very beginning of the line) and then you can type in the beginning <code> tags. Then press ESC to stop editing multiple lines and save.

So the final HTML encoded and escaped code looks like this:

<pre class='code-highlight'>
<code>#include &lt;stdio.h&gt;</code>
<code></code>
<code>main(){</code>
<code>    printf("hello, world\\n");</code>
<code>}</code>
</pre>

You can get the CSS on Bitbucket or copy it here:

.code-highlight {                   /* <pre> class that we will use */ 
    counter-reset: lineNumber;      /* resets counter to prepare for use */
    border: 2px solid rgba(255, 128, 64, 0.5); /* orange border around code */
    border-radius: 4px;             /* creates a rounded border */ 
} .code-highlight code {            /* <code> tags around each line of code */
    counter-increment: lineNumber;  /* counter that will be incremented */
    font-family: Consolas, Monaco, monospace; /* specific font to use */
    word-wrap: break-word;          /* forces word wrap */
    font-size: 14px;                /* this allows 80 chars for the div I use */
    line-height: 150%;              /* space betwen lines for readability */
    -moz-tab-size: 4;               /* specific tab width that is*/
    -o-tab-size: 4;                 /* to be used to prevent display of */
    tab-size: 4;                    /* smaller or larger tabs widths */
} .code-highlight code:before {     /* defines the left sidebar for numbering */
    content: counter(lineNumber);   /* incremented counter to display */
    color: gray;                    /* medium gray line number text */
    display: inline-block;          /* constant width of line number area */
    min-width: 3em;                 /* specific width of line number area */
    background-color: whitesmoke;   /* light gray background for line numbers */
    text-align: right;              /* line number align on right side */
    padding-right: 0.25em;          /* prevents line number from hitting edge */
    margin-right: 0.25em;           /* spacer between line number and code */
    border-right: 2px solid rgba(255, 128, 64, 0.5); /* orange vertical line */
    -webkit-touch-callout: none;    /* these stop line numbers from being */
    -webkit-user-select: none;      /* selected when dragging the mouse */
    -khtml-user-select: none;       /* over the code, this allows a user */
    -moz-user-select: none;         /* to select the code and copy it */
    -ms-user-select: none;          /* without copying the line numbers */
    user-select: none;              /* (IE blocks selection starting only) */
}