使用Highlight.js高亮显示代码时，如何为其添加行号？-html教程-PHP中文网

使用Highlight.js高亮显示代码时，如何为其添加行号？

碧海醫心

发布： 2025-03-16 08:18:28

原创

286人浏览过

使用Highlight.js高亮显示代码时，如何为其添加行号？

highlight.js本身不具备添加行号的功能，需要借助css和javascript实现。本文将详解如何为highlight.js高亮的html代码添加行号，并解释此前未能成功添加的原因。

问题根源在于Highlight.js缺乏内置行号支持，需手动添加。解决方案是通过JavaScript动态生成行号，并用CSS控制其样式和位置。我们需要创建一个<ul></ul>元素来容纳行号，然后用JavaScript遍历代码行，为每个<li>元素添加对应的行号。同时，CSS样式确保行号与代码块对齐。

以下是一个改进后的代码示例，包含必要的CSS和JavaScript代码：

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

<style>
    pre {
        position: relative;
        margin-bottom: 24px;
        border-radius: 3px;
        border: 1px solid #C3CCD0;
        background: #FFF;
        overflow: hidden;
    }

    code {
        display: block;
        padding: 12px 24px;
        overflow-y: auto;
        font-weight: 300;
        font-family: Menlo, monospace;
        font-size: 0.8em;
    }

    code.has-numbering {
        margin-left: 21px;
    }

    .pre-numbering {
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        padding: 12px 2px 12px 0;
        border-right: 1px solid #C3CCD0;
        border-radius: 3px 0 0 3px;
        background-color: #EEE;
        text-align: right;
        font-family: Menlo, monospace;
        font-size: 0.8em;
        color: #AAA;
    }
</style>
<link href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script>
    hljs.highlightAll();
    $(function () {
        $('pre code').each(function () {
            var lines = $(this).text().split('\n').length - 1;
            var $numbering = $('<ul/>').addClass('pre-numbering');
            $(this)
                .addClass('has-numbering')
                .parent()
                .append($numbering);
            for (i = 1; i <= lines; i++) {
                $numbering.append($('<li/>').text(i));
            }
        });
    });
</script>

<pre class="brush:php;toolbar:false;"><code class="html">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行号</title>
</head>
<body>
    <p>测试页面</p>
</body>
</html>

登录后复制

此代码使用了jQuery简化DOM操作，当然也可以用纯JavaScript实现。它先加载Highlight.js和jQuery，然后遍历代码行数，动态创建行号列表并添加到代码块中。 CSS样式控制行号的样式和位置，最终实现为Highlight.js高亮的代码添加行号。

以上就是使用Highlight.js高亮显示代码时，如何为其添加行号？的详细内容，更多请关注php中文网其它相关文章！