How to highlight a certain line in ACE editor?

Question

I am using ACE editor for my site. I need to select/highlight certain line in the editor. But when it is a large code, ACE editor shows some errors like, when it scrolled down line number changes and the highlighting line number differs from the one I want to highlight. I have searched and found this Problem. But actually I can't understand it. Can anyone give some example for highlighting a line in ACE editor ? Here is my current code:

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

Do not try to modify editor dom directly. Ace creates dom nodes only for visible lines and You need to use setMarker like described in How can I highlight multiple lines with Ace?

first create a css class that sets background

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

then add a marker

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

here from and to are numbers of lines that you want to be highlighted