登录
首页 >  文章 >  前端

使用 highlight.js 添加 HTML 源代码行号时，为什么需要额外步骤才能启用行号功能？

时间：2024-12-11 18:48:47 352浏览 收藏

一分耕耘，一分收获！既然都打开这篇《使用 highlight.js 添加 HTML 源代码行号时，为什么需要额外步骤才能启用行号功能？ 》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

使用 highlight.js 添加 HTML 源代码行号时，为什么需要额外步骤才能启用行号功能？

使用highlight.js增加HTML源代码行号时，遇到了难题：按照文档指示，没有成功生成行号。

我们仔细查看了highlight.js的文档，发现了一些未注意的细节。官网将行号功能作为扩展插件提供，需要额外步骤才能启用。

修改后的代码如下：

<html>

<head>
    <style>
        /* ... 同上 ... */
    </style>
    <link rel="stylesheet"
        href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
</head>

<body>
    <!-- ... 同上 ... -->
    <script>
        hljs.highlightAll();
        $(function() {
            $('pre code').each(function() {
                /* ... 同上 ... */
            });
            hljs.initLineNumbersOnLoad();
        });
    </script>
</body>

</html>

通过引入行号插件 highlightjs-line-numbers.js 并调用 hljs.initLineNumbersOnLoad()，行号才得以生成。

理论要掌握，实操不能落！以上关于《使用 highlight.js 添加 HTML 源代码行号时，为什么需要额外步骤才能启用行号功能？ 》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>