Display javascript as code snippet

Question

What I'm trying to do is display a snippet of javascript on the page, and not have it run, just display as a code snippet for folks to copy. I load google's Prettify, then in the page I have this code:

    <pre class="prettyprint">
    <script>
    $(document).ready(function(){
      setTimeout(function(){
        console.log('deleting cookie');
        $.cookie('cookie',null,{domain: document.domain});
     },1000);
    });
    </script>
   </pre>

But this code just executes and doesn't display the JS snippet. What am I missing here?

Try viewing the source HTML of this question, that'd show you one way. — Adrian Wragg
– Adrian Wragg, Commented Jul 19, 2013 at 18:41

Travis · Accepted Answer · 2013-07-19 18:42:22Z

14

You need to convert your < and > characters to HTML entities like so:

<pre class="prettyprint">
  &lt;script&gt;
    $(document).ready(function(){
      setTimeout(function(){
        console.log('deleting cookie');
        $.cookie('cookie',null,{domain: document.domain});
      },1000);
    });
  &lt;/script&gt;
</pre>

I would also recommend wrapping the code in <code> tags in addition to the existing <pre> tags.

answered Jul 19, 2013 at 18:42

Travis

12.4k8 gold badges44 silver badges53 bronze badges

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

Comments

Jim · Accepted Answer · 2013-07-19 18:42:34Z

5

The problem you have is that you are entering HTML and you want it to not be treated as HTML. Specifically, the opening <script> element.

In order to enter HTML that will not be parsed as HTML, you need to encode characters that are special to HTML. For instance < is encoded as <, > is encoded as >, and & is encoded as &.

So, to output the following without it being parsed as HTML:

<script>...</script>

...you need to enter:

&lt;script&gt;...&lt;/script&gt;

answered Jul 19, 2013 at 18:42

Jim

74.1k15 gold badges105 silver badges114 bronze badges

Comments

basher · Accepted Answer · 2013-07-19 18:42:23Z

2

It's running because of the <script> tags. You should encode them:

<pre class="prettyprint">
&lt;script&gt;
$(document).ready(function(){
  setTimeout(function(){
    console.log('deleting cookie');
    $.cookie('cookie',null,{domain: document.domain});
 },1000);
});
&lt;/script&gt;
</pre>

answered Jul 19, 2013 at 18:42

basher

2,3761 gold badge25 silver badges34 bronze badges

Comments

Moazzam Khan · Accepted Answer · 2013-07-19 18:42:33Z

0

use <script> and </script> for <script> tag

answered Jul 19, 2013 at 18:42

Moazzam Khan

3,1702 gold badges23 silver badges38 bronze badges

Comments

jongo45 · Accepted Answer · 2013-07-19 19:00:49Z

-1

Let the textContent property (or createTextNode) do all the heavy lifting of encoding whatever text you need to insert into dom:

var sampleCode="<script> $(document).ready(function(){ setTimeout(function(){ console.log('deleting cookie'); $.cookie('cookie',null,{domain: document.domain}); },1000); }); </script>";
var pre=document.createElement("pre");
pre.textContent=sampleCode;
pre.className="prettyprint";
document.body.appendChild(pre);

edited Jul 19, 2013 at 19:00

answered Jul 19, 2013 at 18:52

jongo45

3,1002 gold badges19 silver badges13 bronze badges

Collectives™ on Stack Overflow

Display javascript as code snippet

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related