CODEWITHSUNDEEP
ace-editor
amitdar
amitdar

Reputation: 927

Highlight rows that have been changed

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

Upvotes: 4

Views: 2017

Answers (3)

Anon2236
Anon2236

Reputation: 41

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.

Upvotes: 4

dmitry_romanov
dmitry_romanov

Reputation: 5425

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

Upvotes: 1

Jan Jongboom
Jan Jongboom

Reputation: 27342

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;

Upvotes: 6

Related Questions