用 HTML 编写代码块
本文将介绍几种在 HTML 中编写代码片段块的方法。
将 <code> 标记及其内容包装在 <pre> 标记中以在 HTML 中编写代码块
<code> 标签定义了一段计算机代码。里面的内容以浏览器默认的 monospace 字体显示。
标签用于表示 HTML 中的代码块。该标签是一个内联标签。
这意味着如果我们在 <code> 标签内编写代码片段，标签内的内容将显示在一行中。它不保留换行符或空格。
<pre> 标签定义了预格式化的文本。 <pre> 元素中的任何文本都以固定宽度字体显示，并且文本保留空格和换行符。
<pre> 标记内的文本或内容将完全按照 HTML 源代码中的内容显示。 <pre> 标签是块级元素。
如果我们将 <code> 标签及其内容包装在 <pre> 标签内，<code> 标签内的内容将表现为块级元素。内容将具有 monospace 字体，并且代码片段的换行符和空格也将被保留。
例如，编写一些 JavaScript 代码并将代码包装在 <code> 标记中。接下来，用 <pre> 标签包装 <code> 元素。
示例代码：
<p>Code snippet for addition of two numbers in javascript</p>
<pre>
<code>
function add (a,b) {
sum = a + b;
return sum;
}
</code>
</pre>
上面的示例将显示 JavaScript 代码块。
使用 <code> 标记和 CSS white-space 属性在 HTML 中编写代码块
在这个方法中，我们将使用一些 CSS 样式来寻找 <pre> 标签的替代品。以前，我们知道 <code> 元素是一个内联元素。
我们使用了 <pre> 标记使其成为块级元素。但是，我们也可以通过将 display 属性设置为 block 来使 <code> 标签成为块级元素。
我们可以通过将其 white-space 属性设置为 pre-wrap 来保留 code 标签的换行符和空格。因此，它将显示以 HTML 源代码编写的代码片段。
因此，我们将能够在 HTML 中创建代码块。
例如，创建一个 <code> 标记并在其中编写一些 JavaScript 代码片段。给 <code> 标签一个 sum 的类名。
在 CSS 中，选择 sum 类并将 display 属性设置为 block 并将 white-space 属性设置为 pre-wrap。
示例代码：
<code class="sum">
function (a, b) {
sum = a + b;
return sum;
}
</code>
.sum {
display: block;
white-space: pre-wrap;
}
上面的代码示例将生成一个 JavaScript 代码块。