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

Question

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

我使用CodeMirror: Mode Runner演示中描述的lib/runmode.js脚本来突出显示<pre>标记中的代码。这很好。现在我想在代码的左侧添加行号，就像在CodeMirror编辑器中一样。

(CodeMirror.runMode有一个options参数，但这似乎只适用于tabsize。我怎么能添加linenumber到我的代码(像在谷歌代码美化css-class linenums)?)

Answer 1

我会像这样破解Mode Runner

  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);
};