用 HTML 编写代码块

1. 将 <code> 标记及其内容包装在 <pre> 标记中以在 HTML 中编写代码块
2. 使用 <code> 标记和 CSS white-space 属性在 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 代码块。