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:

enter image description here

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

user961437 · Accepted Answer · 2012-11-14 19:18:51Z

1

Used < rather than <

answered Nov 14, 2012 at 19:18

user961437

Sign up to request clarification or add additional context in comments.

Comments

Ondra Žižka · Accepted Answer · 2016-06-02 00:12:53Z

0

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[ ... ]]>

answered Jun 2, 2016 at 0:12

Ondra Žižka

47.2k49 gold badges228 silver badges298 bronze badges

Collectives™ on Stack Overflow

snippet jQuery plugin issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related