使用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 源代码行号时，为什么需要额外步骤才能启用行号功能？的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
403
收藏
