在 codemirror textarea 中突出显示错误行

Question

我有包含 C 代码的文本区域。我想根据几个关键字突出显示 onClick 行。我将行存储在变量中并用关键字检查每一行。

$('#error').click(
        function() {
            var editor= $("textarea[id='c-code']");
            var lines = editor.val().split('\n');
            editor.val(" ");
            for (var i = 0; i < lines.length; i++) {
                if (lines[i].contains("flag")) {
                    var value = '<mark>'
                            + lines[i] + '</mark>';
             editor.append(value );
            editor.append('\n');
                }
            }
        });

但是它不起作用。这是我的 jsfiddle testfiddle

谢谢。

Answer 1

您遇到的主要问题运行是 Codemirror 为您管理文本区域，因此您需要使用 CodeMirror 函数 getValue() 和 setValue( val ) 获取和设置文本区域.

var cEditor = CodeMirror.fromTextArea(document.getElementById("c-code"), {
    lineNumbers: true,
    matchBrackets: true,
    mode: "text/x-csrc",
    gutters: ["CodeMirror-lint-markers"],
    lint: true
  });

$('#error').click(
  function () {
  var lines = cEditor.getValue().split('\n');
  for (var i = 0; i < lines.length; i++) {
    if (0 < lines[i].indexOf("flag")) {
      lines[i] = '<mark>' + lines[i] + '</mark>\n';
    }
  }
  cEditor.setValue(lines.join('\n'));
});

希望这对您有所帮助。

编辑：根据评论，调整脚本以用颜色突出显示整行。

要用颜色突出显示整行，以下链接有助于提供指导： and https://github.com/perak/codemirror/issues/24。使用此指南，可以将上面的代码修改为...

var cEditor = CodeMirror.fromTextArea(document.getElementById("c-code"), {
    lineNumbers: true,
    matchBrackets: true,
    mode: "text/x-csrc",
    gutters: ["CodeMirror-lint-markers"],
    lint: true
  });

$('#error').click(
  function () {
  var lines = cEditor.getValue().split('\n');
  for (var i = 0; i < lines.length; i++) {
    if (0 < lines[i].indexOf("flag")) {
      cEditor.getDoc().markText({line:i,ch:0},{line:i,ch:lines[i].length},{css: "background-color: yellow"});
    }
  }
});

...现在带有单词 flag 的行将具有黄色背景。

在 codemirror textarea 中突出显示错误行

highlighting error lines within codemirror textarea

javascript

jquery

codemirror