我使用 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
一样) )?)
最佳答案
我会像这样破解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);
};
关于javascript - 使用 CodeMirror 通过行号进行独立语法突出显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14237361/