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

Question

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

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

(CodeMirror.runMode 有一个 options 参数，但这似乎只适用于 tabsize。知道如何将行号添加到我的代码中(就像在 google-code-prettify 中的 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);
};