如何在 ACE 编辑器中突出显示某一行

Question

我正在为我的网站使用 ACE 编辑器。我需要在编辑器中选择/突出显示某些行。但是当它是一个大代码时，ACE 编辑器会显示一些错误，例如，当它向下滚动行号更改并且突出显示的行号与我要突出显示的行号不同时。我已经搜索并找到了这个问题。但实际上我无法理解它。任何人都可以举一些例子来突出显示ACE编辑器中的一行吗？这是我当前的代码：

var aceLines = document.getElementsByClassName("ace_line");
var gutters = document.getElementsByClassName("ace_gutter-cell");
var gutLineNo = parseInt(gutters[0].innerHTML)-1;
if(count1 != 0){
        aceLines[arNum[count]-gutLineNo].style.backgroundColor = "green";
        aceLines[arNum[count1]-gutLineNo].style.backgroundColor = "black";
    }else{
        aceLines[arNum[count]-gutLineNo].style.backgroundColor = "green";
    }

Answer 1

不要尝试直接修改编辑器 dom。Ace 仅为可见线创建 dom 节点，并且您需要使用 setMarker 如如何使用 Ace 突出显示多行中所述？

首先创建一个设置背景的 CSS 类

.myMarker {
  position:absolute;
  background:rgba(100,200,100,0.5);
  z-index:20
}

然后添加标记

var Range = ace.require('ace/range').Range;
editor.session.addMarker(new Range(from, 0, to, 1), "myMarker", "fullLine");

这里from和to是您要突出显示的行数