2

私はスタンドアロンの構文強調表示に CodeMirror V. 3 を使用しています (私のプロジェクトの他の部分でも CodeMirror エディターを使用しているため、他のスタンドアロン構文強調表示ライブラリは使用したくありませんgoogle-code-prettify)。

CodeMirror: Mode Runner Demolib/runmode.jsで説明されているスクリプトを使用して、タグ内のコードを強調表示します。これはうまくいきます。ここで、CodeMirror エディターと同じように、コードの左側に行番号を追加したいと考えています。<pre>

（引数CodeMirror.runModeがありoptionsますが、これはタブサイズでのみ機能するようです。コードに行番号を追加する方法はありますか（ google-code-prettify the css-class のようにlinenums）？）

4

1 に答える 1

3

私はこのように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);
};
于 2013-01-10T01:58:39.257 に答える