title: React Ace editor marker highlight the whole line even startCol and endCol defined to limit the columns
body: <p>I use the following code to display an Ace editor and highlight a text range. </p>
  
  <p>JS:</p>
  
  <pre><code>let markers = [];
  markers.push({startRow: 6, startCol: 5, endRow: 7, endCol: 6, className: 'replacement_marker', type: 'text' });
  </code></pre>
  
  <p>React render() :</p>
  
  <pre><code>    return (
          &lt;div&gt;
              &lt;AceEditor
                  mode="java"
                  theme="github"
                  name="UNIQUE_ID_OF_DIV"
                  value={this.state.value}
                  markers={markers}
              /&gt;
          &lt;/div&gt;
      );
  </code></pre>
  
  <p>CSS : </p>
  
  <pre><code>.replacement_marker {
     position: absolute;
     background-color: #FFFF00;
  }
  </code></pre>
  
  <p>With this code, editor highlights the whole line 6 and 7 without limiting the highlight to column 5 - 6. </p>
  
  <p><a href="https://i.stack.imgur.com/4652I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4652I.png" alt="enter image description here"></a>
  What is the correct way to highlight just a part of the line without highlighting the whole line? </p>