如何使用 <code> 元素来显示特定的计算机代码，而不用分页？

Question

我正在使用 HTML 和 CSS 创建技术文档页面。

我正在尝试包含代码，但在不分页的情况下添加其中一些代码时遇到了问题。

例如，这工作正常并且不会中断：

<code>
  return number * number;
</code>

但这会中断，我该如何添加这样的代码？

  <code>
    var n = 0; var x = 0; while (n < 3) { n++; x +=n; }
  </code>

请帮忙！！提前致谢！！

Answer 1

您的问题是“小于”号。因为它被用作 HTML 标签的起始字符。

您可以通过两种方式解决此问题：

使用 CDATA 标签 - 在此处了解更多信息 -> https://www.tutorialspoint.com/xml/xml_cdata_sections.htm
将其更改为 HTML 实体“<”- 在此处了解更多信息 -> https://www.w3schools.com/html/html_entities.asp

Answer 2

尝试将“小于”符号更改为实体。 HTML 使用该符号表示标记的开始。在这种情况下，此标志的实体将是：

&lt;

结果：

<code>
var n = 0; var x = 0; while (n &lt; 3) { n++; x +=n; }
</code>

How can I use the <code> element to display certain computer code, without my page breaking?