Highlight rows that have been changed
-
25-05-2021 - |
Question
I have ace editor integrated in my site. I have some code there, and i want to highlight changes in some rows.
Found out that
var range = new Range(rowStart, columnStart, rowEnd, columnEnd);
var marker = editor.getSession().addMarker(range,"ace_active_line","background");
supposed to highlight rows, but i get illigal constructor error on the creation of Range object. Any ideas ?
Is there a way to add yellow background to specific lines ?
Thanks
Solution
The problem is here that Range
points to the browsers native range function and not to the Ace one. So you're probably not importing it. Try doing something like:
// taken from kitchen-sink.js
var Range = require("./range").Range;
OTHER TIPS
If you want to display changed lines, you can make a mark on a 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 not so good - I started learning javascript just two days ago.
If you would like 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 are here: https://groups.google.com/d/msg/ace-discuss/joAFrXwWLX8/jejWFyGiMTwJ