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.