如何在HTML中添加示例计算机代码

在网页开发中，HTML是构建网页结构的基础语言。有时候，我们需要在HTML页面中添加示例计算机代码来展示特定的编程逻辑或代码片段。下面将介绍几种常见的方法来实现这一目的。

1. 使用<code>标签

<code>标签用于定义计算机代码文本。它会以等宽字体显示代码，使其在页面上更易识别。例如：

<p>下面是一个简单的JavaScript函数示例：</p>
<code>
function greet() {
  console.log("Hello, world!");
}
</code>

在上述代码中，JavaScript函数被包裹在<code>标签内，在浏览器中会以特定的字体样式显示。

2. 结合<pre>标签

<pre>标签用于定义预格式化的文本。当与<code>标签结合使用时，可以保留代码中的空格和换行符格式。示例如下：

<pre><code>
function addNumbers(a, b) {
  return a + b;
}

let result = addNumbers(5, 3);
console.log(result);
</code></pre>

这样，代码的缩进和换行等格式会被完整保留，更符合代码的实际展示需求。

3. 使用代码高亮库

为了使代码更具可读性，我们可以使用代码高亮库，如Prism.js或Highlight.js。以Prism.js为例，首先需要引入Prism.js的库文件和相应的CSS文件，然后按照以下方式使用：

<link href="prism.css" rel="stylesheet" />
<script src="prism.js"></script>

<pre><code class="language-javascript">
function multiply(a, b) {
  return a * b;
}
</code></pre>

在上述代码中，通过给<code>标签添加class="language-javascript"属性，Prism.js会自动识别并对JavaScript代码进行高亮显示。

4. 注意事项

在添加示例计算机代码时，要确保代码的准确性和完整性。注意选择合适的展示方式，以提高用户的阅读体验。如果使用代码高亮库，要确保库文件的正确引入和配置。

通过以上方法，我们可以在HTML页面中有效地添加示例计算机代码，让网页内容更加丰富和专业。