Highlight.js在HTML代码块中添加行号的使用方法

技术文摘

2025-01-09 16:40:36 小编

在网页开发中，展示代码是一项常见的需求。为了让代码更具可读性，给代码块添加行号是一个很好的做法。Highlight.js是一个流行的代码高亮库，它不仅可以对代码进行语法高亮显示，还能方便地为代码块添加行号。下面就来介绍一下Highlight.js在HTML代码块中添加行号的具体使用方法。

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

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

接下来，在HTML文件中创建代码块。可以使用<pre>和<code>标签来包裹代码，例如：

<pre><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>

要为代码块添加行号，需要在代码块的父元素<pre>上添加data-line-numbers属性，如下所示：

<pre data-line-numbers><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>

最后，在页面加载完成后，调用Highlight.js的initHighlightingOnLoad方法来初始化代码高亮和行号显示，代码如下：

<script>
    document.addEventListener('DOMContentLoaded', (event) => {
        hljs.initHighlightingOnLoad();
        hljs.initLineNumbersOnLoad();
    });
</script>

通过以上步骤，就可以在HTML代码块中成功添加行号了。Highlight.js还支持多种主题和语言，你可以根据自己的需求进行选择和配置。它还提供了丰富的API，方便开发者进行更高级的定制。

Highlight.js为在HTML代码块中添加行号提供了简单而有效的方法，能够提升代码的可读性和展示效果，有助于更好地分享和交流代码。

TAGS: 使用方法添加行号 highlight.js HTML代码块

万千站长工具

技术文摘

Highlight.js在HTML代码块中添加行号的使用方法

欢迎使用万千站长工具！