'add custom lint error marker for codemirror

I receive the errors in my code from an external API. It gives me the

1)line number 2) error description

I could achieve the highlighting process but I need to add a lint error marker on the left side of the textarea.

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.

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,

and for the lintWith it is defined in the lint.js as the following :

     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);
    }
  });

Solution 1:^[1]

You need to use setGutterMarker method from CodeMirror. It takes line, markerId and markerElement and put it to the needed line on the gutter area.

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'add custom lint error marker for codemirror

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]