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