highlight.js 添加行号
在使用 Highlight.js 给 HTML 源代码着色的过程中，要增加行号，需要深入理解官方文档中对行号的描述。
根据官方描述，在代码块中添加 CSS 类名 "has-numbering"，将产生行号。但从问题中提供的代码来看，这一步被遗漏了。
修改后的代码如下：
<pre><code class="html has-numbering">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行号</title>
</head>
<body>
<p>测试页面</p>
</body>
</html>
</code></pre>需要注意的是，还需要加入额外的 JavaScript 代码来动态生成行号：
立即学习“前端免费学习笔记（深入）”；
hljs.highlightAll();
$(function () {
$('pre code').each(function () {
var lines = $(this).text().split('\n').length - 1;
var $numbering = $('</i>').addClass('pre-numbering');
$(this)
.parent()
.append($numbering);
for (i = 1; i <= lines; i++) {
$numbering.append($('<i>').text(i));
}
});
});以上就是如何使用 Highlight.js 为 HTML 代码添加行号？的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
130
收藏
