CSS 如何在网页中显示带缩进的源代码

在本文中，我们将介绍如何使用HTML和CSS在网页中显示带缩进的源代码。

阅读更多：CSS 教程

使用`<pre>`标签

在HTML中，我们可以使用<pre>标签来包含源代码，并在网页上显示带有缩进的效果。<pre>标签会保留文本中的所有空格和换行符，并且自动给文本添加等宽字体的样式。

<pre>
    <code>
        function factorial(n) {
            if (n === 0) {
                return 1;
            } else {
                return n * factorial(n - 1);
            }
        }
    </code>
</pre>

上面的示例代码展示了一个递归计算阶乘的 JavaScript 函数。在使用<pre>标签包含源代码后，浏览器会自动对文本进行缩进处理，使得代码保持原有的格式。

使用CSS样式修饰源代码

在网页中显示源代码不仅需要使用HTML的<pre>标签，还可以通过CSS来为源代码添加样式并将其与其它内容区分开来。

为源代码添加背景色和边框

通过为<pre>标签应用CSS样式，我们可以为源代码添加背景色和边框，使其更易于阅读。

pre {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 10px;
}

上述样式代码为<pre>标签定义了一个浅灰色的背景色和淡灰色的边框，同时给源代码块添加了10px的内边距，使其在视觉上与周围内容有所区分。

为源代码添加语法高亮

如果想要更进一步让源代码在网页中展示得更清晰，我们可以使用一些CSS库或框架来实现代码的语法高亮显示。这样可以为不同的编程语言添加相应的颜色，并突出显示关键字和注释。

常见的CSS库或框架有：

我们可以选择其中一个库或框架，并按照其文档提供的指引进行使用和配置。

示例

下面是一个完整的示例，展示了如何使用HTML和CSS在网页中显示带缩进的源代码，并为代码块添加背景色和边框：

<!DOCTYPE html>
<html>
<head>
    <title>Display Source Code with Indent</title>
    <style>
        pre {
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>
    <pre>
        <code>
            function factorial(n) {
                if (n === 0) {
                    return 1;
                } else {
                    return n * factorial(n - 1);
                }
            }
        </code>
    </pre>
</body>
</html>

在浏览器中打开以上代码，就可以看到一个带有缩进的源代码块，并且源代码块背景为浅灰色，边框为淡灰色。