# highlight.line-numbers.js

**Repository Path**: yangrz/highlight.line-numbers.js

## Basic Information

- **Project Name**: highlight.line-numbers.js
- **Description**: 自己写的 highlight.js 行号插件
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: https://yangrz.gitee.io/highlight.line-numbers.js/demo.html
- **GVP Project**: No

## Statistics

- **Stars**: 8
- **Forks**: 1
- **Created**: 2020-04-05
- **Last Updated**: 2022-09-06

## Categories & Tags

**Categories**: javascript-toolkits

**Tags**: None

## README

# highlight.line-numbers.js

### 介绍
自己写的 [highlight.js](https://highlightjs.org/) 行号插件。  
演示: https://yangrz.gitee.io/highlight.line-numbers.js/demo.html

### 为何造轮子
前端代码高亮插件 [highlight.js](https://highlightjs.org/)，默认是不带行号显示功能的，我的博客曾经使用的是比较流行的 [highlightjs-line-numbers.js](https://github.com/wcoder/highlightjs-line-numbers.js) 来显示行号。但是，最近我仔细观察时发现，这个 highlightjs-line-numbers.js 插件在处理空行的时候，把空行替换成了空格。可是有些时候，我们的空行是有特殊意义的，我希望插件最好不要对我的代码进行任何改动！

基于以上原因，我才决定自己写行号插件。  
本人在写这个插件时，参考或直接引用了 highlightjs-line-numbers.js 的部分代码！

想了解更多，请阅读博文： https://www.yangdx.com/2020/04/144.html

### 使用方法
插入 JS 文件和代码（注意顺序）：
```html
<!-- 引入代码高亮插件 highlight.js -->
<script src="highlight.pack.js"></script>

<!-- 引入代码行号显示插件 highlight.line-numbers.js -->
<script src="highlight.line-numbers.js"></script>

<script>
// 初始化代码高亮插件
hljs.initHighlightingOnLoad();

// 初始化代码行号显示插件
hljsln.initLineNumbersOnLoad();
</script>
```

添加 CSS 样式：
```css
pre {
    position: relative;
}
.hljsln {
    display: block;
    margin-left: 2.4em;
    padding-left: 0.7em !important;
}
.hljsln::-webkit-scrollbar {
    height: 15px;
}
.hljsln::-webkit-scrollbar-thumb {
    background: #666;
}
.hljsln::-webkit-scrollbar-thumb:hover {
    background: #797979;
}
.hljsln::-webkit-scrollbar-thumb:active {
    background: #949494;
}
.hljsln .ln-bg {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 2.4em;
    height: 100%;
    background: #333;
}
.hljsln .ln-num {
    position: absolute;
    z-index: 2;
    left: 0;
    width: 2.4em;
    height: 1em;
    text-align: center;
    display: inline-block;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.hljsln .ln-num::before {
    color: #777;
    font-style: normal;
    font-weight: normal;
    content: attr(data-num);
}
.hljsln .ln-eof {
    display: inline-block;
}
```

### 开放接口
此插件有两个公共方法 `hljsln.initLineNumbersOnLoad()` 和 `hljsln.addLineNumbersForCode()`。  
① 一般情况下，我们使用 `hljsln.initLineNumbersOnLoad()` 就够了，它是在页面加载完成时自动给代码块增加行号。  
② 而 `hljsln.addLineNumbersForCode()` 用于直接给代码文本添加行号标签，如：
```
var html = 'xxx';
html = hljsln.addLineNumbersForCode(html);
```
仅调用 `hljsln.addLineNumbersForCode()` 是不够的，还需要你自己给 code 标签加上 css 的样式名 `hljsln`，才能行号显示。  
我自己[博客后台](https://gitee.com/yangrz/yangdx_blog)的 CKEditor 就是用的这个方法，在编辑器中也可显示行号。