Displaying source code with Ajax

I am right now writing a lot of tutorials for a massive online training course on web development. One of my main annoyances is that you need to maintain the demo code in two sections: the source code itself and the articles you put it in. Furthermore you also need to encode HTML entities add line numbers and highlight parts of the code. Normally I'd do that with a PHP solution, but for this course we wanted all to be in HTML and working offline. That's why I took jQuery (which allows for non-HTTP Ajax) and came up with the Ajax Code Display script.

Using Ajax Code Display

In order to use the script simply put jQuery and the script in your document. Doesn't matter if you put it on the top or the bottom:


<script src="jquery-1.2.2.pack.js"></script>
<script src="ajaxcodedisplay.js"></script>    
  

Once that is done, all you need to have a code example in your article is to add a link with the class "codeexample". The script then fires off an Ajax request, gets the document the link points to, replaces the special characters and adds line numbers. The following code in your HTML creates the code example below it:

<p><a href="ordered.html"
class="codeexample"
>ordered.html</a></p>

ordered.html

Only showing certain lines of code

One thing you'll always have to do in tutorials is to show only parts of a bigger script to explain a certain section. You can do this with this script by providing a special class with a range of lines to show. The following examples illustrate how to use it:

<p><a href="ordered.html"
class="codeexample lines[1,5,9-14,18-19]"
>ordered.html (lines 1, 5, 9 to 14 and 18 to 19)</a></p>

ordered.html (lines 1, 5, 9 to 14 and 18 to 19)

<p><a href="ordered.html"
class="codeexample lines[10-15]"
>ordered.html (lines 10 to 15)</a></p>

ordered.html (lines 10 to 15)

<p><a href="ordered.html"
class="codeexample lines[5,8,9]"
>ordered.html (lines 5, 8 and 9)</a></p>

ordered.html (lines 5,8 and 9)

Notice that the scripts adds dividers [...] between blocks when there is a difference of more than one.

Highlighting certain lines

Highlighting code lines works the same was as cutting down on lines to show, just with a different class:

<p><a href="ordered.html"
class="codeexample lines[10-15] highlight[10,12,14-15]"
>ordered.html (lines 10 to 15)</a></p>

ordered.html (lines 10 to 15)

Providing a live preview

The last feature I thought useful is to be able to provide a live preview in an iframe. The following link has a class called "dodisplay" and will show the code in an IFRAME below the link when you click it. Clicking the link again will hide the frame.

<p><a href="ordered.html"
class="codeexample dodisplay highlight[10,12,14-15]"
>ordered.html (click to show output)</a></p>

ordered.html (click to show output)

Styling

The code generated is a PRE element with the class "codeexample" and a CODE element inside. Highlighted lines are surrounded by STRONG elements and the line numbers are spans followed by a tab. Go nuts in your CSS.

Licensing and Download

The code is licensed with Creative Commons Attribution, which means you can use and modify it but you need to say you had it from me.

If you like this and have any questions, please drop me a line on the blog post about Ajax Code Display.