How can I highlight code with ACE editor?
First you want to declare your line number as a global variable.
var erroneousLine;
This is the highlightError function, which takes in a line number (lineNumber
) as its parameter. which could be triggered from an error message or using editor.selection.getCursor().row
to get the current row, or something else.
function highlightError(lineNumber) {
unhighlightError();
var Range = ace.require("ace/range").Range
erroneousLine = editor.session.addMarker(new Range(lineNumber, 0, lineNumber, 144), "errorHighlight", "fullLine");
}
Notice that I have declared a errorHighlight
, which is how this will be highlighted. In your css place the following:
.errorHighlight{
position:absolute;
z-index:20;
background-color:#F4B9B7;
}
This function unhighlights the already highlighted line
function unhighlightError(){
editor.getSession().removeMarker(erroneousLine);
}
Highlight the word:
var range = new Range(rowStart, columnStart, rowEnd, columnEnd);
var marker = editor.getSession().addMarker(range,"ace_selected_word", "text");
Remove the highlighted word:
editor.getSession().removeMarker(marker);
Highlight the line:
editor.getSession().addMarker(range,"ace_active_line","background");
There is a server side version of the highlighter (which runs in node.js) available, that'll probably be portable to webbased javascript fairly easy.