Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

What are the ways which can be used to display [in html] a code segment involving script tag & at the same time preventing browser execution of that script code?

share|improve this question

5 Answers

up vote 1 down vote accepted

Encode all of the < and > characters, so you end up with

<div>
   <h2>Here's some JS code</h2>

   <pre>
      &lt;script type="text/javascript"&gt;
         var x = 7;
         var y = 10;
         if (x &lt; y) {
            alert('this alert will not fire!');
         }
      &lt;/script&gt;
    </pre>
</div>
share|improve this answer
You'd lose all your formatting of course. The <pre> tag works for this (but there's probably something less HTML 1.0 these days).. – Mike Christensen Aug 31 '12 at 18:23
Good point. pre's still got better support than the css equvialents, and is a lot more obvious when looking at the html. – Marc B Aug 31 '12 at 18:23
< and > still won't show up when wrapped in a pre tag, however. – Charlie Aug 31 '12 at 18:24
Checkout this thread too. There's many Javascript solutions that will display code and even do syntax highlighting. – Mike Christensen Aug 31 '12 at 18:26
up vote 2 down vote

you will need to escape special html related chars like this:

  <body>
    <p>&lt;script type="text/javascript" &gt;</p>
    <p>alert("hello world!");</p>
    <p>&lt;/script&gt;<br />
    </p>
  </body>

for a full list see: http://www.theukwebdesigncompany.com/articles/entity-escape-characters.php

share|improve this answer
up vote 1 down vote

Encode all HTML entities ( < , > , & etc ) and wrap everything in pre tags to keep your formatting.

<pre>
  &lt;script type="text/javascript"&gt;
    alert('test');
  &lt;/script&gt;
</pre>

A handy converter: http://www.rishida.net/tools/conversion/

share|improve this answer
up vote 1 down vote

Back in the days of HTML2, there were the <xmp> and <listing> elements for precisely this: You could do. e.g.

<xmp>Because this is HTML2, there isn't a <script> tag to worry about anyway.</xmp>

And it would show the tags as content, rather than interpret them as the start and end of elements (you couldn't do </xmp> though, for obvious reasons).

However, having this capability actually caused far more problems than they helped with, for both browser writers and for web authors. Hence, they were deprecated in HTML3.2 (or arguably HTML3 but that wasn't the only argument to HTML3 - another was just what document with "HTML3" on it was the one that counted...), and removed with HTML4.

Hence, the only thing to do is to escape it.

<pre> helps the formatting, though I often just do a find-replace to swap each space with a non-breaking space instead.

That done, you can render it more prettily than <xmp> and <listing> ever allowed, and there are libraries out there like beautyOfCode and google-code-prettify to do the heavy lifting for you.

share|improve this answer
up vote 0 down vote

To be completely honest, I'm not sure if this is a great way to do this, so if it's not, I hope someone will tell me.

If you don't feel like running your code through a converter, you can use this jQuery function to display the .html of an element as .text. Wrapped inside of <pre> tags, you've got formatted code.

var pre = $("pre").html();
$("pre").text(pre);​

http://jsfiddle.net/charlescarver/hqh8q/1/

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.