highlight.js扩展代码行号

从GitHub下载highlightjs的源代码,下载地址:https://github.com/highlightjs/highlight.js

在文件highlight.js中进行源代码的修改:

(function(factory) {
    //highlightjs源代码
    return hljs;
});
/**
 * 加入源代码行号
 */
(function(window, document){
    //创建行号样式
    function createLineNumbersStyle(){
      var lineNumbersStyle=[
        ".{0} ul {",
          "list-style: decimal;",
          "margin: 0px 0px 0 40px !important;",
          "padding: 0px;}",
        ".{0} ul li {",
          "list-style: decimal;",
          "border-left: 1px solid #ddd !important;",
          "padding: 5px!important;",
          "margin: 0 !important;",
          "line-height: 14px;",
          "word-break: break-all;",
          "word-wrap: break-word;}"
      ];
      var styleEl = document.createElement("style");
      styleEl.type = "text/css";
      styleEl.innerHTML = lineNumbersStyle.join("").format("hljs");
      document.getElementsByTagName("head")[0].appendChild(styleEl);
    }
    //初始化代码行号
    function initLineNumbersOnLoad(){
      createLineNumbersStyle();
      var codeList=document.querySelectorAll('pre code');
      var block={};
      for(var i=0;i
  • ") + "\n
  • "; codeList[i].innerHTML=codeHtml; } } if(window.hljs){ window.hljs.initLineNumbersOnLoad=initLineNumbersOnLoad; } else{ window.console.error("highlight.js not find!"); } })(window, document);

    函数format(),请查看https://blog.csdn.net/chlung/article/details/84561880

    使用行号函数:

    window.onload = function(){

        hljs.initLineNumbersOnLoad();

    }

    你可能感兴趣的:(JavaScript)