How to make a simple prettyprint <pre> with jquery

I don't know how to do it with jQuery and nobody else does either, because its not as simple as you are making it out to be. Fortunately for you somebody has already written a badass pretty-print solution in JavaScript for markup:

http://prettydiff.com/markup_beauty.js

As far as I know it is the most complete pretty-print algorithm for markup languages ever written.

The real magic would come in handling a tag of arbitrary properties. Here's the simple "anchor" version: jsFiddle

$('pre.prettyprint').each(function() {
    $('a').each(function(){
        $anchor = $(this);
        html = '<span class="element">&lt;a ';
        html += '<span class="attribute">href</span>=<span class="value">"' + $anchor.attr('href') + '"&gt;</span>';
        html += '</span>' + $anchor.text() + '<span class="element">&lt;/a&gt;</span>'
        $anchor.replaceWith(html);
    });
});