使用CodeMirror进行带行号的独立语法高亮显示

Question

我使用CodeMirror V. 3来突出显示独立语法(我项目的其他部分也使用CodeMirror编辑器，所以我不想使用其他独立语法突出显示库，如google-code-prettify)。

我使用lib/runmode.js脚本(如CodeMirror:运行模式演示中所描述的)来突出显示<pre>-tag中的代码。这个很好用。现在，我想在代码的左侧添加行号，就像在CodeMirror编辑器中一样。

( CodeMirror.runMode有一个options参数，但这似乎只适用于表大小。知道如何在代码中添加linenumbers (比如google- code -美化css-class linenums)吗？

Answer 1

我会像这样黑模式跑步者

  CodeMirror.runMode = function(string, modespec, callback, options) {
  var mode = CodeMirror.getMode(CodeMirror.defaults, modespec);
   var lineNumber = 1; // Line number
   if (callback.nodeType == 1) {
    var tabSize = (options && options.tabSize) || CodeMirror.defaults.tabSize;
    var node = callback, col = 0;
    node.innerHTML = "";
    callback = function(text, style) {


      if (text == "\n") {

      lineNumber++ ; //increment line number
      var lineNum = document.createTextNode(lineNumber); // 

      node.appendChild(document.createElement("br"));

      node.appendChild(lineNum); // append
        col = 0;
        return;
      }
      var content = "";
      // replace tabs
      for (var pos = 0;;) {
      var lineNum = document.createTextNode(lineNumber + " ")
        var idx = text.indexOf("\t", pos);
        if (idx == -1) {
          content += text.slice(pos);
          col += text.length - pos;

          break;
        } else {
          col += idx - pos;
          content += text.slice(pos, idx);
          var size = tabSize - col % tabSize;
          col += size;
          for (var i = 0; i < size; ++i) content += " ";
          pos = idx + 1;

        }
      }

      if (style) {
        var sp = node.appendChild(document.createElement("span"));
        sp.className = "cm-" + style.replace(/ +/g, " cm-");
        sp.appendChild(document.createTextNode(content));
      } else {
        node.appendChild(document.createTextNode(content));
      }
    };
  }

  var lines = CodeMirror.splitLines(string), state = CodeMirror.startState(mode);
  for (var i = 0, e = lines.length; i < e; ++i) {
    if (i) callback("\n");
    var stream = new CodeMirror.StringStream(lines[i]);
    while (!stream.eol()) {
      var style = mode.token(stream, state);
      callback(stream.current(), style, i, stream.start);
      stream.start = stream.pos;
    }
  }
// add the first line
 var outputDiv = document.getElementById("output");
  var firstLine = document.createTextNode("1 ");
  outputDiv.insertBefore(firstLine, outputDiv.firstChild);
};