使用 <pre> 和 <code> 标记显示 javascript 脚本答案

【问题标题】：Using <pre> and <code> tags to display a javascript script使用 <pre> 和 <code> 标记显示 javascript 脚本
【发布时间】：2013-07-26 18:31:00
【问题描述】：

我正在试验 html 5 中的

 和  标签，因为我想在我的网站上包含一些代码 sn-ps。我正在使用下面的页面作为测试页面，但它没有显示任何内容。有什么原因吗？

    <body>
    <div style="color:#000000">
      <pre>
        <code>
          <script type="text/javascript">
            $('#inputField').hide();
          </script>
        </code>
      </pre>
    </div>
    </body>


据我了解，使用这些新标签会否定它们包含的任何代码，但情况似乎并非如此。

干杯，

J

【问题讨论】：

删除<script> 其中的任何内容都将被解释为脚本并解析

标签： javascript jquery html pre

【解决方案1】：

删除script标签：

<body>
    <div style="color:#000000">
      <pre>
        <code>
            $('#inputField').hide();
        </code>
      </pre>
    </div>
</body>

【讨论】：

我也是这么想的。这就是 javascript 在 Firebug 中创建控制台错误的原因。

【解决方案2】：

这些标签仅用于“装饰”目的。其中的代码仍将被执行。如果要显示它，则必须至少将 <script> 标记转换为 html：

&lt;script type="text/javascript"&gt;

然后将显示其间的 JavaScript 代码。

但你不需要两者，我会使用 <pre>（默认情况下是块元素），<code> 用于内联使用。

【讨论】：

根据我读到的网站，你应该用
```
 标签包装  标签。
```
它没有伤害，它只是看起来“错误”......至少在我看来，但这可能是个人偏见。
刚刚在<pre> 中找到this question on SO 关于<code>。
是的。我认为这是这里的主要问题，这是事物的空白方面，这就是为什么它们应该结合使用（因为我对维护我的缩进有点不习惯）。

【解决方案3】：

如果你去掉 script 标签，这将起作用。

这些代码标签只是将里面的文本字体改成等宽字体，但不会覆盖其他标签（甚至php标签）的解释。

更好的方法是使用 CSS 来获得颜色突出显示，或使用 javascript 库。

【讨论】：

我将这些用于语义目的。

 标签还考虑了空格，因此它不仅仅是像您上面提到的那样更改字体的情况。

哦，是的。我对字体的注释只是关于代码标签:)

【解决方案4】：

据我了解，使用这些新标签会否定它们包含的任何代码

他们没有。他们告诉用户代理以代码的形式呈现数据。所以会有字体变化，空格会很大，应该被翻译软件跳过等等。

标记仍然有效（因此您可以将元素添加到样式中，或将代码链接到其他地方等等）因此您仍然需要将 HTML 特殊字符（&lt;、&amp; 等）替换为它们的各个实体（&lt;、&amp; 等）。

【讨论】：