为 codemirror 添加自定义 lint 错误标记

Question

I receive the errors in my code from an external API. It gives me the我从外部 API 收到我的代码中的错误。它给了我

1)line number 2) error description 1）行号 2）错误描述

I could achieve the highlighting process but I need to add a lint error marker on the left side of the textarea.我可以实现突出显示过程，但我需要在文本区域的左侧添加一个 lint 错误标记。

The following code enable me to add lint marker when the page is load by definingoption called 'lintWith', However, I need to add these lint markers when I click on the button.以下代码使我能够通过定义名为“lintWith”的选项在加载页面时添加 lint 标记，但是，我需要在单击按钮时添加这些 lint 标记。

The is the code I'm using:这是我正在使用的代码：


<html>
    <head>
        <link rel="stylesheet" href="codemirror/lib/codemirror.css">
        <script src="codemirror/lib/codemirror.js"></script>
        <script src="codemirror/addon/edit/matchbrackets.js"></script>
        <script src="codemirror/mode/python/python.js"></script>
        <!-- <script src="codemirror/addon/selection/active-line.js"></script> -->
        <link rel="stylesheet" href="codemirror/addon/lint/lint.css">
        <script src="codemirror/addon/lint/lint.js"></script>
        <script src="codemirror/addon/lint/javascript-lint.js"></script>
        <script src="cm-validator-remote.js"></script>
        <style type="text/css">
          .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
          .CodeMirror-empty { outline: 1px solid #c22; }
        </style>
    </head>
    <body>
    <div><textarea id="code" name="code" placeholder="Code goes here...">
mycode
    pass

a__ = 5
Check 
Hello World
123456
    </textarea></div>
    </body>
    <script type="text/javascript">
function check_syntax(code, result_cb)
{
    var error_list = [{
            line_no: 2,
            column_no_start: 14,
            column_no_stop: 17,
            fragment: "def doesNothing:\n",
            message: "invalid syntax.......",
            severity: "error"
        }, {
            line_no: 4,
            column_no_start: 1,
            column_no_stop: 3,
            fragment: "a__ = 5\n",
            message: "convention violation",
            severity: "error"
        }]

    result_cb(error_list);
}




var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    mode: { name: "python",
            version: 2,
            singleLineStringErrors: false },
    lineNumbers: true,
    indentUnit: 4,
    tabMode: "shift",
    gutters: ["CodeMirror-lint-markers"],
    lintWith: {
        "getAnnotations": CodeMirror.remoteValidator,
        "async": true,
        "check_cb": check_syntax
    }
});


function AddLintMarker(){

// I want to add the lintWith markers when click on this button
// i've tried like this  editor.setOption("lintWith.getAnnotations",CodeMirror.remoteValidator ) but it doesn't work
}
    </script>

<input type="button" value="add boxes" onclick="AddLintMarker()">
</html>

Here the code lint marker is added when the page is load because it is assigned to the editor but I want the lint maker to shows only when I click on the button and provide values to the check_syntx function,此处代码 lint 标记在页面加载时添加，因为它已分配给编辑器，但我希望 lint 生成器仅在我单击按钮并向 check_syntx function 提供值时显示，

and for the lintWith it is defined in the lint.js as the following:对于 lintWith，它在 lint.js 中定义如下：

     CodeMirror.defineOption("lintWith", false, function(cm, val, old) {
    if (old && old != CodeMirror.Init) {
      clearMarks(cm);
      cm.off("change", onChange);
      CodeMirror.off(cm.getWrapperElement(), "mouseover", cm._lintState.onMouseOver);
      delete cm._lintState;
    }
    
    if (val) {
      var gutters = cm.getOption("gutters"), hasLintGutter = false;
      for (var i = 0; i < gutters.length; ++i) if (gutters[i] == GUTTER_ID) hasLintGutter = true;
      var state = cm._lintState = new LintState(cm, parseOptions(val), hasLintGutter);
      cm.on("change", onChange);
      CodeMirror.on(cm.getWrapperElement(), "mouseover", state.onMouseOver);
      startLinting(cm);
    }
  });

Answer 1

You need to use setGutterMarker method from CodeMirror.您需要使用setGutterMarker中的 setGutterMarker 方法。 It takes line, markerId and markerElement and put it to the needed line on the gutter area.它采用 line、markerId 和 markerElement 并将其放在装订线区域所需的行上。

 var editor = CodeMirror.fromTextArea(document.getElementById("code"), { lineNumbers: true, indentUnit: 4, gutters: ["CodeMirror-lint-markers"], }); function makeMarker() { var marker = document.createElement("div"); marker.innerHTML = `<div>⚠️</div>`; marker.setAttribute("title", "Some text"); return marker; } editor.doc.setGutterMarker(1, "CodeMirror-lint-markers", makeMarker());

 <:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https.//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/codemirror.min:js" integrity="sha512-/8pAp30QGvOa8tNBv7WmWiPFgYGOg2JdVtqI8vK+xZsqWHnNd939v9s+zJHXZcJe5wPD44D66zz+CLTD3KacYA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/codemirror.min.css" integrity="sha512-uf06llspW44/LZpHzHT6qBOIVODjWtv4MxCricRxkzvopAlSWnTf6hpZTFxuuZcuNE9CBQhqE0Seu1CoRk84nQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <textarea id="code" name="code" placeholder="Code goes here..."> mycode pass a__ = 5 Check Hello World 123456 </textarea> </body> </html>

为 codemirror 添加自定义 lint 错误标记

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-05-12 16:21:46

为 codemirror 添加自定义 lint 错误标记

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-05-12 16:21:46

解决方案1
1 已采纳 2022-05-12 16:21:46