title: add custom lint error marker for codemirror
body: <p>I receive the errors in my code from an external API. It gives me the</p>
  <p>1)line number
  2) error description</p>
  <p>I could achieve the highlighting process but I need to add a lint error marker on the left side of the textarea.</p>
  <p>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.</p>
  <p>The is the code I'm using:</p>
  <pre><code>
  &lt;html&gt;
      &lt;head&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;codemirror/lib/codemirror.css&quot;&gt;
          &lt;script src=&quot;codemirror/lib/codemirror.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;codemirror/addon/edit/matchbrackets.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;codemirror/mode/python/python.js&quot;&gt;&lt;/script&gt;
          &lt;!-- &lt;script src=&quot;codemirror/addon/selection/active-line.js&quot;&gt;&lt;/script&gt; --&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;codemirror/addon/lint/lint.css&quot;&gt;
          &lt;script src=&quot;codemirror/addon/lint/lint.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;codemirror/addon/lint/javascript-lint.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;cm-validator-remote.js&quot;&gt;&lt;/script&gt;
          &lt;style type=&quot;text/css&quot;&gt;
            .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
            .CodeMirror-empty { outline: 1px solid #c22; }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div&gt;&lt;textarea id=&quot;code&quot; name=&quot;code&quot; placeholder=&quot;Code goes here...&quot;&gt;
  mycode
      pass
  
  a__ = 5
  Check 
  Hello World
  123456
      &lt;/textarea&gt;&lt;/div&gt;
      &lt;/body&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
  function check_syntax(code, result_cb)
  {
      var error_list = [{
              line_no: 2,
              column_no_start: 14,
              column_no_stop: 17,
              fragment: &quot;def doesNothing:\n&quot;,
              message: &quot;invalid syntax.......&quot;,
              severity: &quot;error&quot;
          }, {
              line_no: 4,
              column_no_start: 1,
              column_no_stop: 3,
              fragment: &quot;a__ = 5\n&quot;,
              message: &quot;convention violation&quot;,
              severity: &quot;error&quot;
          }]
  
      result_cb(error_list);
  }
  
  
  
  
  var editor = CodeMirror.fromTextArea(document.getElementById(&quot;code&quot;), {
      mode: { name: &quot;python&quot;,
              version: 2,
              singleLineStringErrors: false },
      lineNumbers: true,
      indentUnit: 4,
      tabMode: &quot;shift&quot;,
      gutters: [&quot;CodeMirror-lint-markers&quot;],
      lintWith: {
          &quot;getAnnotations&quot;: CodeMirror.remoteValidator,
          &quot;async&quot;: true,
          &quot;check_cb&quot;: check_syntax
      }
  });
  
  
  function AddLintMarker(){
  
  // I want to add the lintWith markers when click on this button
  // i've tried like this  editor.setOption(&quot;lintWith.getAnnotations&quot;,CodeMirror.remoteValidator ) but it doesn't work
  }
      &lt;/script&gt;
  
  &lt;input type=&quot;button&quot; value=&quot;add boxes&quot; onclick=&quot;AddLintMarker()&quot;&gt;
  &lt;/html&gt;
  
  
  
  </code></pre>
  <p>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,</p>
  <p>and for the lintWith it is defined in the lint.js as the following :</p>
  <pre><code>     CodeMirror.defineOption(&quot;lintWith&quot;, false, function(cm, val, old) {
      if (old &amp;&amp; old != CodeMirror.Init) {
        clearMarks(cm);
        cm.off(&quot;change&quot;, onChange);
        CodeMirror.off(cm.getWrapperElement(), &quot;mouseover&quot;, cm._lintState.onMouseOver);
        delete cm._lintState;
      }
      
      if (val) {
        var gutters = cm.getOption(&quot;gutters&quot;), hasLintGutter = false;
        for (var i = 0; i &lt; gutters.length; ++i) if (gutters[i] == GUTTER_ID) hasLintGutter = true;
        var state = cm._lintState = new LintState(cm, parseOptions(val), hasLintGutter);
        cm.on(&quot;change&quot;, onChange);
        CodeMirror.on(cm.getWrapperElement(), &quot;mouseover&quot;, state.onMouseOver);
        startLinting(cm);
      }
    });
  </code></pre>