使用 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 源代码行号时,为什么需要额外步骤才能启用行号功能?的详细内容,更多请关注其它相关文章!