如何使用 HTML 显示代码

在编写程序时，经常需要在代码中插入一些代码片段，以便进行演示或分享。为了显示代码，我们通常会使用专门的代码显示工具，如 GitHub、Gist 等，但实际上，我们还可以使用 HTML 来实现代码的显示。

1. 使用 <code> 标签

HTML 提供了一个专门用来显示代码的标签：<code>。该标签可以将代码片段包含在内，并应用默认的代码样式。

<code>
function hello() {
  console.log("Hello, World!");
}
</code>

效果如下：

&ltp> 标签另外一种用法是在段落中引用一小段代码。这种情况下，应该将代码放在 &ltpre> 标签中，并添加 &ltcode> 标签：

<p>你可以在 CSS 文件中添加 <code>padding</code> 属性来增加元素的内边距。</p>

效果如下：

你可以在 CSS 文件中添加 padding 属性来增加元素的内边距。

2. 使用 <pre> 和 <code> 标签

如果要在代码中保留格式和空格，可以使用 <pre> 标签。<pre> 标签保留文本中的所有空格和换行符，这样就能够在页面上按照原来的样式显示。

<pre><code>
var message = "Hello, World!";
console.log(message);
</code></pre>

效果如下：

var message = "Hello, World!";
console.log(message);

3. 使用 <textarea> 标签

如果需要显示大块的代码，建议使用 <textarea> 标签，该标签可以显示多行文本，并提供了滚动条使用户能够在文本框中浏览更多的内容。

<textarea cols="60" rows="10">
function hello() {
  console.log("Hello, World!");
}
</textarea>

效果如下：

4. 使用 CSS 定制样式

通过在 CSS 文件中定义样式，我们可以为代码块添加自定义的样式。下面是一个简单的样式表，可以使代码块看起来更加漂亮。

pre {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  border-left: 3px solid #f36d33;
  color: #444;
  page-break-inside: avoid;
  font-family: monospace;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1em 1.5em;
  display: block;
  word-wrap: break-word;
}

添加样式后，<pre> 和 <code> 标签将会采用该样式：

<pre><code>
var message = "Hello, World!";
console.log(message);
</code></pre>

效果如下：

var message = "Hello, World!";
console.log(message);

结论

在本文中，我们介绍了三种在 HTML 中显示代码的方法，分别是使用 <code> 标签、使用 <pre> 和 <code> 标签、以及使用 <textarea> 标签。另外，我们还介绍了如何通过 CSS 定制代码样式。在编写程序的过程中，根据实际需求选择相应的方法，即可轻松地在网页中显示代码。