如何使用 highlightjs 添加 html 源代码行号
在使用 HighlightJS 突出显示 HTML 源代码时，你提到无法为代码添加行号。这是因为 HighlightJS 默认不会添加行号，你需要手动添加。
官方文档说明
官方文档中关于行号的描述：https://highlightjs.readthedocs.io/en/latest/line-numbers.html
我的小书坊源码(三层实现)
下载
可以实现用户的在线注册、登陆后可以添加图书、购买图书，可以对图书类别、出版社、价格等进行饼图分析默认帐号/密码：51aspx/51aspx该系统采用三层接口开发，App_Code下为三层结构的代码文件，适合三层入门者学习使用数据绑定控件使用的是GridView，顶部公用文件采用了UserControl用户控件调用DB_51aspx下为Sql数据库文件，附件即可【该源码由51aspx提供】
修改后的代码
立即学习“前端免费学习笔记（深入）”；
为了解决你的问题，修改后的代码如下：
<!DOCTYPE html>
<head>
<style>
pre {
position: relative;
margin-bottom: 24px;
border-radius: 3px;
border: 1px solid #C3CCD0;
background: #FFF;
overflow: hidden;
}
code {
display: block;
padding: 12px 24px;
overflow-y: auto;
font-weight: 300;
font-family: Menlo, monospace;
font-size: 0.8em;
}
code.has-numbering {
margin-left: 21px;
}
.pre-numbering {
position: absolute;
top: 0;
left: 0;
width: 20px;
padding: 12px 2px 12px 0;
border-right: 1px solid #C3CCD0;
border-radius: 3px 0 0 3px;
background-color: #EEE;
text-align: right;
font-family: Menlo, monospace;
font-size: 0.8em;
color: #AAA;
}
</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>
</head>
<body>
<pre class="brush:php;toolbar:false;">
<code class="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行号</title>
</head>
<body>
<p>测试页面</p>
</body>
</html>
</code>
<script>
hljs.highlightAll();
$(function() {
$('pre code').each(function() {
var lines = $(this).text().split('\n').length - 1;
var $numbering = $('<ul/>').addClass('pre-numbering');
$(this)
.addClass('has-numbering')
.parent()
.append($numbering);
for (i = 1; i <= lines; i++) {
$numbering.append($('<li/>').text(i));
}
});
});
</script> 
