如何用 HTML 展示计算机代码

news2025/7/27 19:34:15

原文：如何用 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 1
    else:
        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>