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?



source to share

3 answers

The problem is that it Range

points to a native browser based range function, not ace. So you probably don't import it. Try doing something like:

// taken from kitchen-sink.js
var Range = require("./range").Range;




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);
    } else if (e.action == "remove") {
        while (activeLine < (e.end.row+1)) {
            editor.session.removeGutterDecoration(activeLine, modified);
        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.



If you want to mark lines with errors / warnings, you can use this API:

      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



All Articles