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

Question

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

JS:

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

反应渲染（）：

    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 覆盖了标记层的左侧和宽度值。

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

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

React Ace editor marker highlight the whole line even startCol and endCol defined to limit the columns

javascript

ace-editor

reactjs

react-ace