How to make a simple prettyprint <pre> with jquery

Question

http://jsfiddle.net/JamesKyle/L4b8b/

I am attempting to make an extremely simple prettyprint function with jQuery, but I do not know how to find elements, attributes, and values (shown in the jsfiddle).

I am trying to accomplish the following:

1. Wrap elements with <span class="element" />
2. Wrap attributes with <span class="attribute" />
3. Wrap values with <span class="value" />
4. Replace < with &lt
5. Replace > with &gt

Here is the current jQuery that I have:

$(document).ready(function() {

    $('pre.prettyprint').each(function() {

        $(this).css('whitespace','pre-line');
        /* Why isnt ^this^ working? */

        var code = $(this).html();

        // How should I define the following

        var element = $(code).find(/* ELEMENTS */);
        var attribute = $(code).find(/* ATTRIBUTES */);
        var value = $(code).find(/* Values */);

        $(element).wrap('<span class="element" />');
        $(attribute).wrap('<span class="attribute" />');
        $(value).wrap('<span class="value" />');

        $(code).find('<').replaceWith('&lt');
        $(code).find('>').replaceWith('&gt');
    });
});

Which is attempting to format this:

<pre class="prettyprint">
    <a href="http://website.com">Visit Website</a>
    <a href="#top">Back to Top</a>
</pre> 

into this:

<pre class="prettyprint">
    <span class="element">a <span class="attribute">href</span>=<span class="value">”http://website.com”</span></span>Visit Website<span class="element">/a</span>
    <br/>
    <span class="element">a <span class="attribute">href</span>=<span class="value">”#top”</span></span>Back to Top<span class="element">/a</span>
</pre>

Thank you ahead of time!

You can see the jsfiddle here: http://jsfiddle.net/JamesKyle/L4b8b/

Answer 1

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);
    });
});

Answer 2

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.