我使用以下代码显示 Ace 编辑器并突出显示文本范围。
JS:
let markers = [];
markers.push({startRow: 6, startCol: 5, endRow: 7, endCol: 6, className: 'replacement_marker', type: 'text' });
react 渲染():
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 列。
最佳答案
在我的例子中,这是由于错误的自定义 CSS 覆盖了标记层的左侧和宽度值。
.ace_marker-layer {
> div:not(.ace_selection){
width: 100% !important;
border-radius: unset !important;
left: 0 !important;
}
}
关于javascript - React Ace 编辑器标记突出显示整行,甚至定义了 startCol 和 endCol 以限制列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52583865/