如何使用highlight.js库为HTML源代码添加行号

技术文摘

2025-01-09 16:42:07 小编

在网页开发中，展示带有行号的HTML源代码可以提高代码的可读性和可维护性。highlight.js是一个流行的JavaScript代码高亮库，它不仅可以对代码进行语法高亮显示，还可以方便地为代码添加行号。下面将介绍如何使用highlight.js库为HTML源代码添加行号。

需要引入highlight.js库。可以通过在HTML文件的头部添加以下代码来引入：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>

接下来，在HTML文件中创建一个用于显示代码的元素，例如一个<pre>标签，并给它一个唯一的ID，如下所示：

<pre id="code"><code class="html">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>
</code></pre>

然后，使用JavaScript代码来初始化highlight.js并添加行号。在HTML文件的底部添加以下代码：

<script>
    document.addEventListener('DOMContentLoaded', (event) => {
        hljs.highlightAll();
        const codeBlocks = document.querySelectorAll('pre code');
        codeBlocks.forEach((block, index) => {
            const lines = block.textContent.split('\n');
            const numberedLines = lines.map((line, i) => `${i + 1}: ${line}`);
            block.textContent = numberedLines.join('\n');
        });
    });
</script>

在上述代码中，首先使用hljs.highlightAll()方法对所有的代码块进行语法高亮显示。然后，通过querySelectorAll方法获取所有的代码块元素，并使用forEach方法遍历每个代码块。在遍历过程中，将代码块的文本内容按行分割，并为每行添加行号，最后将修改后的内容重新赋值给代码块。

通过以上步骤，就可以使用highlight.js库为HTML源代码添加行号了。这样，在网页上展示的HTML代码将更加清晰易读，方便开发人员进行调试和维护。还可以根据需要对代码的样式进行进一步的定制，以满足不同的需求。

TAGS: 行号添加方法 highlight.js库使用 HTML源代码处理代码高亮技巧

万千站长工具

技术文摘

如何使用highlight.js库为HTML源代码添加行号

欢迎使用万千站长工具！