如何用 HTML 展示计算机代码 - 教程

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

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

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

什么是 HTML

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

HTML 展示代码的基本方法

1. 使用 <code> 标签

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

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

在浏览器中显示为：

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

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

2. 使用 <pre> 标签

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

编程狮示例    这是一个编程狮的示例页面。

在浏览器中显示为：

    编程狮示例    这是一个编程狮的示例页面。

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

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

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

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

在浏览器中显示为：

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

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

HTML 展示代码的高级技巧

1. 添加语法高亮

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

    .keyword { color: purple; }    .string { color: red; }    .comment { color: green; }      编程狮示例    这是一个编程狮的示例页面。

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

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

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

            HTML 代码展示 - 编程狮            Python 代码示例    def say_hello():    print("Hello, W3Cschool！")say_hello()

HTML 代码示例

        编程狮示例    欢迎来到编程狮！

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/prism.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-python.min.js"></script>

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

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

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

            代码缩放和折叠示例 - 编程狮            .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;        }        代码缩放和折叠示例                          点击展开/折叠代码            Python 示例代码                            def factorial(n):    if n == 0:        return 1    else:        return n * factorial(n-1)  print(factorial(5))  # 输出 120

点击展开/折叠代码HTML 示例代码

        编程狮示例    欢迎来到编程狮！    这是我的第一个 HTML 页面。

<script> function toggleCode(element) { const content = element.nextElementSibling; content.classList.toggle('collapsed'); } </script>

在这个示例中，我们通过 CSS 和 JavaScript 实现了代码块的折叠和展开功能。用户可以点击代码块的头部来展开或折叠代码内容，这样可以节省页面空间，提升用户体验。

在编程狮中实践 HTML 代码展示

在编程狮（w3cschool.cn）的学习过程中，你可以在以下场景中实践 HTML 代码展示：

1. 课程笔记：在学习编程狮的 HTML、CSS、JavaScript 课程时，用 HTML 记录代码示例，制作自己的学习笔记网页。
2. 项目分享：在编程狮的项目展示区，用 HTML 创建一个漂亮的网页来展示你的代码和项目成果。
3. 问题求助：在编程狮的讨论区提问时，使用 <pre> 和 <code> 标签清晰地展示你的代码，方便其他学习者和专家帮助你解决问题。

推荐学习资源

如果你想更系统地学习 HTML 和编程技术，编程狮（w3cschool.cn）提供了以下优质课程：

1. HTML5 基础教程：全面讲解 HTML 的基本语法和常用标签，适合零基础学习者。
2. CSS3 入门与实战：学习如何使用 CSS 美化网页，结合 HTML 创建精美的页面。
3. JavaScript 基础入门课程：掌握前端开发的核心技术，实现网页的交互效果。
4. Python 编程基础：学习 Python 语言，结合 HTML 展示代码，提升编程能力。
5. Web前端入门扫盲课程：写给编程纯小白的无门槛微课。