为什么pre或代码块中的JS代码会执行？

Question

我一直在尝试在页面中显示一些JS代码。

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

但是，如果在页面中加载了jQuery，则I会收到一个警告，并且不会显示代码。如何在不执行JS的情况下显示此JS。我尝试了SyntaxHighLighter插件，它突出显示了代码，但我仍然收到警告。

向用户显示此JS代码而不执行他们的最佳方式是什么？

Answer 1

因为<pre>和<code>都不意味着“不要把它当作标记”。

<pre>的意思是“在这里呈现空格”

<code>的意思是“以这样一种方式呈现它(即使用适当的字体等)，以告知读者它是一个代码样本”。

如果你想使用在超文本标记语言中有特殊含义的字符(如<)，那么你仍然必须使用实体来表示它们。

适用于<

• >的
• <适用于>
• &的&

您不需要担心'或"，因为您不在属性值中。

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>