如何用 HTML 展示计算机代码

原文：如何用 HTML 展示计算机代码 | w3cschool笔记

（请勿将文章标记为付费！！！！）

在编程学习和文档编写过程中，清晰地展示代码是一项关键技能。HTML 作为网页开发的基础语言，提供了多种展示计算机代码的方法。本文将为你详细介绍如何使用 HTML 展示计算机代码，并结合最新技术标准规范，帮助你在编程狮（w3cschool.cn）的学习之旅中更高效地记录和分享代码。

什么是 HTML

HTML（HyperText Markup Language）是用于创建网页的标准标记语言。它通过一系列的标签（tags）来定义网页的结构和内容，浏览器会根据这些标签来解析和显示网页。HTML 是所有网页开发的基础，无论你是想成为前端开发工程师还是全栈开发工程师，掌握 HTML 都是必不可少的。

HTML 展示代码的基本方法

1. 使用 `<code>` 标签

<code> 标签用于定义代码片段，它可以告诉浏览器这是代码内容，通常浏览器会以等宽字体（monospace font）来显示 <code> 标签中的内容，这使得代码更易于阅读。例如：

<p>这是一个简单的 Python 代码示例：</p>
<code>
print("Hello, 编程狮！")
</code>

在浏览器中显示为：

这是一个简单的 Python 代码示例： print("Hello, 编程狮！")

<code> 标签适合用于在文本中插入一小段代码，比如函数名、变量名或者简短的代码行。

2. 使用 `<pre>` 标签

<pre> 标签（preformatted text）用于定义预格式化的文本。在 <pre> 标签中的文本会保留空格和换行，这使得它非常适合展示代码块，因为代码的缩进和格式对于代码的可读性至关重要。例如：

<pre>
<html>
<head><title>编程狮示例</title>
</head>
<body><p>这是一个编程狮的示例页面。</p>
</body>
</html>
</pre>

在浏览器中显示为：

<html>
<head><title>编程狮示例</title>
</head>
<body><p>这是一个编程狮的示例页面。</p>
</body>
</html>

注意：在上面的示例中，我们使用了 HTML 实体（如 < 表示 <，> 表示 >），因为直接在 HTML 中写 < 和 > 可能会被浏览器误解为 HTML 标签。在展示 HTML 代码时，需要对这些特殊字符进行转义。

3. 结合 `<code>` 和 `<pre>` 标签

为了更好地展示代码块，你可以将 <code> 标签和 <pre> 标签结合使用，这样既能保留代码的格式，又能以等宽字体显示代码。例如：

<pre><code>
function sayHello() {console.log("Hello, W3Cschool！");
}
sayHello();
</code></pre>

在浏览器中显示为：

function sayHello() {console.log("Hello, W3Cschool！");
}
sayHello();

这种方法是展示代码块的最佳实践，能够确保代码在网页中正确显示并易于阅读。

HTML 展示代码的高级技巧

1. 添加语法高亮

虽然 HTML 本身不支持语法高亮，但你可以通过 CSS 来实现简单的语法高亮效果。例如，为关键字、字符串、注释等添加不同的颜色。以下是一个简单的示例：

<style>.keyword { color: purple; }.string { color: red; }.comment { color: green; }
</style><pre><code>
<html>
<head><title>编程狮示例</title>
</head>
<body><p>这是一个编程狮的示例页面。</p>
</body>
</html>
</code></pre>

通过 CSS 类来为不同的代码元素添加颜色，可以让你的代码展示更加专业和美观。在实际项目中，通常会使用专门的代码高亮库，如 Prism.js 或 Highlight.js，这些库提供了丰富的主题和语言支持，能够轻松实现漂亮的代码高亮效果。

2. 使用第三方代码高亮库

为了更方便地实现代码高亮，你可以使用第三方代码高亮库。以下是一个使用 Prism.js 的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML 代码展示 - 编程狮</title><!-- 引入 Prism.js 的 CSS --><link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism.min.css" rel="stylesheet" />
</head>
<body><h1>Python 代码示例</h1><pre><code class="language-python">
def say_hello():print("Hello, W3Cschool！")
say_hello()</code></pre><h1>HTML 代码示例</h1><pre><code class="language-html">
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>编程狮示例</title>
</head>
<body><p>欢迎来到编程狮！</p>
</body>
</html></code></pre><!-- 引入 Prism.js 的 JS 文件 --><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/prism.min.js"></script><!-- 引入 Prism.js 的 Python 语言支持 --><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-python.min.js"></script>
</body>
</html>

在浏览器中打开这个页面，你会看到代码被自动高亮显示，不同的语法元素（如关键字、字符串、标签等）会显示为不同的颜色，这样可以大大提升代码的可读性。

3. 创建代码缩放和折叠功能

为了在页面上更高效地展示代码，尤其是当代码很长时，你可以添加代码缩放和折叠功能。这通常需要结合 JavaScript 来实现。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>代码缩放和折叠示例 - 编程狮</title><style>.code-container {margin: 20px 0;padding: 10px;background-color: #f5f5f5;border: 1px solid #ddd;border-radius: 5px;overflow: hidden;}.code-header {display: flex;justify-content: space-between;padding: 5px 0;border-bottom: 1px solid #ddd;cursor: pointer;}.code-content {padding: 10px 0;max-height: 200px;overflow-y: auto;}.collapsed {max-height: 0;overflow: hidden;transition: max-height 0.3s ease-out;}</style>
</head>
<body><h1>代码缩放和折叠示例</h1><div class="code-container"><div class="code-header" onclick="toggleCode(this)"><span>点击展开/折叠代码</span><span>Python 示例代码</span></div><div class="code-content collapsed"><pre><code>
def factorial(n):if n == 0:return 1else:return n * factorial(n-1)print(factorial(5))  # 输出 120</code></pre></div></div><div class="code-container"><div class="code-header" onclick="toggleCode(this)"><span>点击展开/折叠代码</span><span>HTML 示例代码</span></div><div class="code-content collapsed"><pre><code>
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>编程狮示例</title>
</head>
<body><h1>欢迎来到编程狮！</h1><p>这是我的第一个 HTML 页面。</p>
</body>
</html></code></pre></div></div><script>function toggleCode(element) {const content = element.nextElementSibling;content.classList.toggle('collapsed');}</script>
</body>
</html>