React Ace编辑器标记突出显示整行，甚至定义为限制列的startCol和endCol

Question

我使用以下代码显示Ace编辑器并突出显示文本范围。

JS：

let markers = [];
markers.push({startRow: 6, startCol: 5, endRow: 7, endCol: 6, className: 'replacement_marker', type: 'text' });

反应render（）：

    return (
        <div>
            <AceEditor
                mode="java"
                theme="github"
                name="UNIQUE_ID_OF_DIV"
                value={this.state.value}
                markers={markers}
            />
        </div>
    );

CSS：

.replacement_marker {
   position: absolute;
   background-color: #FFFF00;
}

使用此代码，编辑器将突出显示第6行和第7行，而不会将突出显示限制在第5-6列。

突出显示行的一部分而不突出显示整个行的正确方法是什么？

Answer 1

在我的情况下，这是由于不良的自定义CSS会覆盖标记层的left和width值。

.ace_marker-layer {
  > div:not(.ace_selection){
    width: 100% !important;
    border-radius: unset !important;
    left: 0 !important;
  }
}