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