Why the JS codes inside pre or code block executes?

Question

I have been trying to show some JS codes in a page.I have tried using

<pre >
    <code>
        <script type="text/javascript"> 
            $(function(){
                alert("Hello");
            });
        </script>
    </code>
</pre>

But if jQuery is loaded in the page then the I am getting an alert and the code is not being shown. How can i show this JS without executing the JS. I tried SyntaxHighLighter plugin and it's highlighting the code but still i am getting the alert.

What is the best way to show this JS code to users without executing them.

Answer 1

Because neither <pre> nor <code> mean "Don't treat this as markup".

<pre> means "Render whitespace here"

<code> means "Present this (i.e. use an appropriate font, etc) in such a way that it informs the reader that it is a code sample".

If you want to use characters which have special meaning in HTML (such as <) then you still have to use entities to represent them.

• < for <
• > for >
• & for &

You don't need to worry about ' or " as you aren't inside an attribute value.

Answer 2

Using <script> tags means that this is javascript to be executed.

Remove the <script> tags altogether:

<pre>
<code>
$(function(){
        alert("Hello");
    });
</code>
</pre>

Alternatively, encode the < and > to < and > so the <script> tags are rendered as text and not interpreted as script tags:

<pre>
<code>
&lt;script type="text/javascript"&gt;
$(function(){
        alert("Hello");
    });
&lt;/script&gt;
</code>
</pre>