snippet jQuery plugin issue

Question

This is probably fairly straightforward but I can't find a solution anywhere. When using:

http://www.steamdev.com/snippet/

$("pre.htmlCode").snippet("html",{style:"greenlcd"});

 

<pre class="htmlCode" style="float:left;">
    <h1>Snippet style selector</h1>
    <div class="instructions">
        <p>Choose your style below.</p>
        <p>Preview your style here.</p>
    </div>
    <!-- 39 styles to choose from! -->
</pre>

This seems to work, except the tags are being processed like this:

How do I prevent this from happening? I hope this is clear enough!

Answer 1

In your <pre>, you need to escape the HTML.

<pre class="htmlCode" style="float:left;">
    &lt;h1>Snippet style selector&lt;/h1>
    &lt;div class="instructions">
        &lt;p>Choose your style below.&lt;/p>
        &lt;p>Preview your style here.&lt;/p>
    &lt;/div>
    &lt;!-- 39 styles to choose from! -->
</pre>

Or in case of XHTML, use <[CDATA[ ... ]]>

Answer 2

Used < rather than <