highlight.js html代码行号显示方案
Highlight.js本身不具备直接添加行号的功能，但我们可以通过结合CSS和JavaScript来实现。本文将详细讲解如何利用Highlight.js、CSS样式和JavaScript代码为HTML代码添加行号。
问题背景： 许多开发者希望在使用Highlight.js高亮显示HTML代码的同时，能够清晰地显示代码行号，提升代码可读性。然而，Highlight.js默认情况下并不提供此功能。
解决方案： 需要自定义CSS样式和编写JavaScript代码来动态生成行号。
步骤：
立即学习“前端免费学习笔记（深入）”；
-
CSS样式定义： 创建CSS样式来控制行号的显示位置、字体、颜色等。 这些样式将确保行号与代码块完美结合。
-
JavaScript动态生成行号： 使用JavaScript遍历代码块中的每一行，并动态创建
<li>元素作为行号，然后将这些行号元素插入到代码块左侧。 本例中，我们使用jQuery简化DOM操作。
完整代码示例：
<link href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<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;
}
.pre-numbering li {
margin: 0;
padding: 0;
list-style: none;
}
</style>
<script>
$(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>
<pre class="brush:php;toolbar:false;"><code class="html">
<meta charset="UTF-8">
<title>行号</title>
<p>测试页面</p>
这段代码首先引入Highlight.js和jQuery库，然后定义CSS样式和JavaScript函数。JavaScript函数遍历每个<code>标签，计算行数，并动态创建行号列表。 请确保已正确引入Highlight.js和jQuery库。
通过以上步骤，即可在使用Highlight.js高亮显示HTML代码的同时，轻松添加行号，提升代码的可读性和易用性。
