如何突出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是要突出显示的行数