为什么执行pre或code block中的JS代码？

Question

我一直在尝试在页面中显示一些JS代码.我尝试过使用

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

但是如果在页面中加载了jQuery,那么我将收到警报并且代码未显示.如何在不执行JS的情况下显示此JS.我尝试了SyntaxHighLighter插件,它突出了代码,但我仍然收到警报.

向用户显示此JS代码而不执行它们的最佳方法是什么.

Answer 1

因为既不是<pre>也不<code>是指"不要把它当作标记".

<pre> 意思是"在这里渲染空白"

<code> 表示"以这样的方式呈现此(即使用适当的字体等),以便它通知读者它是代码样本".

如果要使用HTML中具有特殊含义的字符(例如<),则仍需使用实体来表示它们.

• < 对于 <
• > 对于 >
• & 对于 &

您不必担心'或"因为您不在属性值中.

Answer 2

使用<script>标签意味着这是javascript要执行.

<script>完全删除标签:

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

或者,编码<和>,<然后>将<script>标记呈现为文本而不是解释为脚本标记:

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