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/

Jameejamel

This isn't really simple ;) – Sprit

compared to what instructions I've seen it is haha – Jameejamel

Shouldn't whitespace be white-space? – Parasitology

@JayGilford OMG THANK YOOU, I was staring at it like wth am I missing? – Jameejamel

hehe easy to miss :) pure chance I spotted it – Parasitology

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

Ansilma

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.

Gerita

OK cool, can you show how its used, cause I can't figure it out – Jameejamel

markup_beauty.js is platform independent so it can be used in the context of the browser or somewhere else. You can play with it directly in the Pretty Diff application as an included component of its prettydiff.js. To use this just call the function markup_beauty and pass in the necessary arguments as described at the top of the markup_beauty.js file. – Gerita

Answer 3

To be honest, you're not going to be able to wrap the elements and attributes like you want using the .find() - The easiest way to achieve what you are wanting is to use regular expression(s) to figure out what needs wrapping, and applying it. Of course, that's a lot easier said than done

Parasitology

Do you know how to use the prettyprint that @Gerita mentioned? – Jameejamel

can't say I've ever used it, but there should be tutorials on google. At 4am, I think it's time to hit the sack. Might take a look tomorrow :) – Parasitology