HTML 使用highlight.js显示HTML代码

在本文中，我们将介绍如何使用highlight.js来高亮显示HTML代码。

阅读更多：HTML 教程

highlight.js简介

highlight.js是一个轻量级的JavaScript库，用于高亮显示代码。它支持多种编程语言和标记语言，包括HTML、CSS、JavaScript等。highlight.js不需要使用额外的样式表，可以直接在网页中引用。

安装highlight.js

首先，我们需要下载highlight.js的源代码。你可以在官方网站上找到最新的版本，将其下载到你的项目文件夹中。然后，在HTML文件中引用highlight.js文件：

<script src="path/to/highlight.js"></script>

使用highlight.js高亮显示HTML代码

接下来，我们需要指定要高亮显示的HTML代码。我们可以使用<pre>标签来包裹HTML代码，并使用<code>标签指定代码的语言类型为HTML。然后，我们可以通过调用hljs.highlightBlock()方法来将代码块高亮显示。

下面是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
    <link rel="stylesheet" href="path/to/styles.css">
    <script src="path/to/highlight.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            const codeBlocks = document.querySelectorAll('pre code');
            for (const block of codeBlocks) {
                hljs.highlightBlock(block);
            }
        });
    </script>
</head>
<body>
    <pre><code>这是一段HTML代码</code></pre>
</body>
</html>

在上述示例中，我们引入了highlight.js的脚本文件，并在页面加载完成后使用DOMContentLoaded事件监听器来高亮显示所有的代码块。

你可以通过在<code>标签中指定不同的语言类型来高亮显示不同类型的代码。例如，如果你要高亮显示CSS代码，可以将class属性设置为css：

<pre><code class="css">body {
    color: red;
}</code></pre>

自定义highlight.js样式

如果你想自定义highlight.js的样式，你可以先下载highlight.js的样式文件，然后在HTML文件中引用。样式文件可以从highlight.js的官方网站下载，或者你也可以自己编写。

下面是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
    <link rel="stylesheet" href="path/to/styles.css">
    <link rel="stylesheet" href="path/to/highlight.js/styles/default.min.css">
    <script src="path/to/highlight.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            const codeBlocks = document.querySelectorAll('pre code');
            for (const block of codeBlocks) {
                hljs.highlightBlock(block);
            }
        });
    </script>
</head>
<body>
    <pre><code>这是一段HTML代码</code></pre>
</body>
</html>

在上述示例中，我们通过在引入highlight.js的样式文件之后再引入我们自定义的样式文件，来覆盖默认的样式。

总结

在本文中，我们介绍了如何使用highlight.js来高亮显示HTML代码。首先，我们需要将highlight.js的源代码下载到项目中，并在HTML文件中引用。然后，我们可以使用<pre>和<code>标签来指定要高亮显示的代码，并通过调用hljs.highlightBlock()方法来实现高亮显示。如果需要自定义highlight.js的样式，可以下载样式文件并在HTML文件中引用。希望本文能帮助你在网页中更好地展示和分享HTML代码。