网页代码高亮并显示行号

代码高亮 highlight.js

以下实践部分是在用markdown写的旧博客网站，现在你看到的是复制过来的富文本。

——

本站代码高亮的插件来自highlight.js。在本页就有实例。使用方法非常简单，推荐以下的做法：

1、在下载页面 https://highlightjs.org/download/ 勾选你想要高亮的语言，然后下载js文件，并放到自己的网站。如果只要使用几种基本的语言，可以直接引用官网给的cdn链接。

2、在demo页面 https://highlightjs.org/static/demo/ 选择喜欢的高亮风格，并下载对应的css文件放到自己的网站，或者引用链接。

3、在页面添加以下html代码启用高亮。

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

4、这时页面上插入的代码应该已经自动高亮了。如果需要指定使用的高亮类型，只需要在```后面加上代码类。例如：

 // markdown语法
 ```js
 // 这里插入js代码

官方使用说明：https://highlightjs.org/usage/

推荐看看官方的API说明：http://highlightjs.readthedocs.io/en/latest/api.html

## 显示行号 line-numbers 

查阅官方的API得知highlight不提供显示行号的功能，需要自己添加。下面分享本站添加行号的方法。添加以下js和css代码：

js：
```js line-numbers
$(function() {
    $('pre code').each(function() {
        var lines = $(this).text().split('\n').length - 1;
        if (lines < 4) return;  // 当行数小于4时不显示行号
        var $numbering = $('<ol/>').addClass('pre-numbering');
        $(this)
            .addClass('has-numbering')
            .parent()
            .append($numbering);
        for(i=1;i<=lines;i++) {
            $numbering.append($('<li/>').text(i));
        }
    });
});

css：

pre {
    position: relative;
}
code.has-numbering {
    margin-left: 26px;
}
.pre-numbering {
    position: absolute;
    top: 0;
    left: 0;
    width: 26px;
    height: 100%;
    margin: 0;
    padding: 9px 4px;
    background-color: #EEE;
    text-align: right;
    font-family: consolas, monospace;
    font-size: 13pt;
    line-height: 135%;
    color: #AAA;
    list-style: none;
}
.pre-numbering li {
    margin: 0;
}