突出顯示已更改的行

Question

我在我的網站中集成了ace編輯器。 我在那裏有一些代碼，我想突出顯示某些行中的更改。

發現，

var range = new Range(rowStart, columnStart, rowEnd, columnEnd); 
var marker = editor.getSession().addMarker(range,"ace_active_line","background"); 

應該突出行，但我上創建Range對象的illigal構造錯誤。有任何想法嗎 ？

有沒有辦法給特定的行添加黃色背景？

感謝

Answer 1

的問題在這裏，Range指向瀏覽器的原生範圍的功能，而不是王牌之一。所以你可能不會導入它。嘗試做類似：

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

Answer 2

如果你想標記與錯誤/警告行，你可以使用這個API：

editor.getSession().setAnnotations([{ 
     row: 1, 
     column: 10, 
     text: "Strange error" 
     type: "error" // also warning and information 
    }]); 

詳情請看這裏：https://groups.google.com/d/msg/ace-discuss/joAFrXwWLX8/jejWFyGiMTwJ

Answer 3

如果你想顯示更改的線條，您可以在陰溝上打上標記而不是突出顯示。

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/

截圖：http://rghost.ru/6h4kMBM5z/image.png

很抱歉，如果我的代碼不是那麼好 - 我開始學習JavaScript就在兩天前。