如何使用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遍历代码块中的每一行，并动态创建

元素作为行号，然后将这些行号元素插入到代码块左侧。 本例中，我们使用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"><meta charset="UTF-8"><title>行号</title><p>测试页面</p>

登录后复制