Highlight the lines that have changed
I have an ace editor built into my site. I have some code and I want to highlight changes in some lines.
It turned out that
var range = new Range(rowStart, columnStart, rowEnd, columnEnd);
var marker = editor.getSession().addMarker(range,"ace_active_line","background");
should highlight lines, but I am getting illigal constructor error when creating Range object. Any ideas?
Is there a way to add a yellow background to certain lines?
thank
+3
source to share
3 answers
If you want to display the changed lines, you can mark the gutter instead of highlighting.
var modified = 'ace-changed'; // css class
editor.on('change', function(e) {
var activeLine = e.start.row;
if (e.action == "insert") {
while (activeLine < (e.end.row+1)) {
editor.session.removeGutterDecoration(activeLine, modified);
editor.session.addGutterDecoration(activeLine, modified);
activeLine++;
}
} else if (e.action == "remove") {
while (activeLine < (e.end.row+1)) {
editor.session.removeGutterDecoration(activeLine, modified);
activeLine++;
}
editor.session.addGutterDecoration(e.start.row, modified);
}
});
JSFiddle: http://jsfiddle.net/u9e31pdm/1/
Screenshot: http://rghost.ru/6h4kMBM5z/image.png
Sorry if my code is not very good - I started learning javascript just two days ago.
+2
source to share
If you want to mark lines with errors / warnings, you can use this API:
editor.getSession().setAnnotations([{
row: 1,
column: 10,
text: "Strange error"
type: "error" // also warning and information
}]);
Details here: https://groups.google.com/d/msg/ace-discuss/joAFrXwWLX8/jejWFyGiMTwJ
0
source to share