Prismatic 插件 Highlight.js 添加行号显示

首先你需要修改插件Prismatic的highlight-core.js文件，具体路径如下：

网站根目录/wp-content/plugins/prismatic/lib/highlight/js/highlight-core.js

编辑highlight-core.js文件，在代码最底部加入以下代码并保存： （注意备份源文件）

(function (w, d) {
    w.hljsln = {
        initLineNumbersOnLoad: initLineNumbersOnLoad,
        addLineNumbersForCode: addLineNumbersForCode
    };

    function initLineNumbersOnLoad() {
        if (d.readyState === 'interactive' || d.readyState === 'complete') {
            documentReady();
        } else {
            w.addEventListener('DOMContentLoaded', function () {
                documentReady();
            });
        }
    }

    function addLineNumbersForCode(html) {
        var num = 1;
        if (/\r|\n$/.test(html)) {
            html += '<span class="ln-eof"></span>';
        }
        html = html.replace(/\r\n|\r|\n/g, function (a) {
            num++;
            var text = ('  ' + num).substr(-3);
            return a + '<span class="ln-num" data-num="' + text + '"></span>';
        });
        html = '<span class="ln-num" data-num="  1"></span>' + html;
        html = '<span class="ln-bg"></span>' + html;
        return html;
    }

    function documentReady() {
        var elements = d.querySelectorAll('pre code');
        for (var i = 0; i < elements.length; i++) {
            if (elements[i].className.indexOf('hljsln') == -1) {
                var html = elements[i].innerHTML;
                html = addLineNumbersForCode(html);
                elements[i].innerHTML = html;
                elements[i].className += ' hljsln';
            }
        }
    }
}(window, document));

编辑完以上代码文件后需要进入插件设置，highlight设置项里的init script中添加以下代码初始化行号显示：

hljs.highlightAll();
hljsln.initLineNumbersOnLoad();    //此行为需要添加的代码

添加完以后还需要进入Advanced Settings 在Custom 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;
}

保存后刷新网页缓存即可显示行号

自用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: #1e1e26;
}
.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: #e5e6e6;
    font-style: normal;
    font-weight: normal;
    content: attr(data-num);
}
.hljsln .ln-eof {
    display: inline-block;
}