JS库 Highlightjs 添加代码行号的实现代码

Highlightjs：代码高亮与行号显示的完美融合

Highlightjs是一款强大的代码高亮Js组件，能够轻松为各种语言编写的代码添加生动的语法高亮样式。除了高亮显示代码语法，你是否曾想过为代码添加行号以更方便地参考和定位？今天，我们就来一起如何在Highlightjs中添加代码行号的实现。

要实现代码行号的显示，我们需要借助简单的JS代码和CSS样式表。通过以下Javascript代码找到页面中的代码块并为每个代码块添加行号。

```javascript

$(function(){

$('pre code').each(function(){

var lines = $(this).text().split('').length - 1; // 获取代码行数

var $numbering = $('

').addClass('pre-numbering'); // 创建行号列表

$(this)

.addClass('has-numbering') // 为代码块添加行号显示样式

.parent()

.append($numbering); // 将行号列表添加到代码块父元素中

for(i=1; i<=lines; i++){

$numbering.append($('

').text(i)); // 在行号列表中添加每个行号

}

});

});

```

接下来，通过CSS样式将行号列表渲染到代码的左侧边缘，使其与代码内容紧密结合。以下是相应的CSS样式表：

```css

pre { / 预格式化文本样式 /

position: relative; / 相对定位以便于行号列表的定位 /

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; / 行号颜色 /

}

```通过上面的JS代码和CSS样式表，你就能轻松地为Highlightjs添加代码行号显示功能。这样，无论是开发者还是读者，都能更方便地参考和理解代码内容。希望这篇文章对大家有所帮助，如有任何疑问，欢迎留言交流。长沙网络推广团队感谢大家对狼蚁SEO网站的支持！如有更多关于网络推广方面的需求，请随时与我们联系。让我们共同助力您的网站优化与推广！请记得关注我们的后续更新，更多精彩内容等您来！