如何使用Highlight.js为HTML代码添加行号？-html教程-PHP中文网

如何使用Highlight.js为HTML代码添加行号？

霞舞

发布： 2025-03-09 10:38:01

原创

599人浏览过

如何使用Highlight.js为HTML代码添加行号？

highlight.js html代码行号显示方案

Highlight.js本身不具备直接添加行号的功能，但我们可以通过结合CSS和JavaScript来实现。本文将详细讲解如何利用Highlight.js、CSS样式和JavaScript代码为HTML代码添加行号。

问题背景： 许多开发者希望在使用Highlight.js高亮显示HTML代码的同时，能够清晰地显示代码行号，提升代码可读性。然而，Highlight.js默认情况下并不提供此功能。

解决方案： 需要自定义CSS样式和编写JavaScript代码来动态生成行号。

步骤：

立即学习“前端免费学习笔记（深入）”；

CSS样式定义： 创建CSS样式来控制行号的显示位置、字体、颜色等。这些样式将确保行号与代码块完美结合。

代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

查看详情

JavaScript动态生成行号： 使用JavaScript遍历代码块中的每一行，并动态创建<code><li>元素作为行号，然后将这些行号元素插入到代码块左侧。本例中，我们使用jQuery简化DOM操作。

完整代码示例：

<link href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

<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;
    }
    .pre-numbering li {
        margin: 0;
        padding: 0;
        list-style: none;
    }
</style>

<script>
    $(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">
<meta charset="UTF-8">
<title>行号</title>
<p>测试页面</p>

登录后复制

这段代码首先引入Highlight.js和jQuery库，然后定义CSS样式和JavaScript函数。JavaScript函数遍历每个<code><code>标签，计算行数，并动态创建行号列表。请确保已正确引入Highlight.js和jQuery库。

通过以上步骤，即可在使用Highlight.js高亮显示HTML代码的同时，轻松添加行号，提升代码的可读性和易用性。

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