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

golang学习网今天将给大家带来《如何使用 Highlight.js 为 HTML 代码添加行号？ 》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

Highlight.js 添加行号

在使用 Highlight.js 给 HTML 源代码着色的过程中，要增加行号，需要深入理解官方文档中对行号的描述。

根据官方描述，在代码块中添加 CSS 类名 "has-numbering"，将产生行号。但从问题中提供的代码来看，这一步被遗漏了。

修改后的代码如下：

    


    
测试页面

需要注意的是，还需要加入额外的 JavaScript 代码来动态生成行号：

hljs.highlightAll();
$(function () {
    $('pre code').each(function () {
        var lines = $(this).text().split('\n').length - 1;
        var $numbering = $('').addClass('pre-numbering');
        $(this)
            .parent()
            .append($numbering);
        for (i = 1; i <= lines; i++) {
            $numbering.append($('').text(i));
        }
    });
});

今天关于《如何使用 Highlight.js 为 HTML 代码添加行号？ 》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！