add option to highlight the active line

css/editor.css

@@ -53,12 +53,14 @@
 }
 
 .text-layer {
+  z-index: 2;
   font-family: Monaco, "Courier New", monospace;
   font-size: 12px;
   cursor: text;
 }
 
 .cursor {
+  z-index: 3;
   position: absolute;
   width: 2px;
   background: black;
@@ -89,13 +91,25 @@
   color: rgb(104, 104, 91);
 }
 
+.marker-layer {
+	z-index: 1;
+}
+
 .marker-layer .selection {
   position: absolute;
-  background: rgba(77, 151, 255, 0.33);
+  z-index: 2;
+  background: rgb(181, 213, 255);
 }
 
 .marker-layer .bracket {
   position: absolute;
+  z-index: 3;
   margin: -1px 0 0 -1px;
   border: 1px solid rgb(192, 192, 192);
+}
+
+.marker-layer .active_line {
+  position: absolute;
+  z-index: 1;
+  background: rgb(232, 242, 254);
 }

demo/editor.html

@@ -68,6 +68,10 @@
         <label for="select_style">Full line selections</label>
         <input type="checkbox" name="select_style" id="select_style" checked>        
       </td>
+      <td>
+        <label for="highlight_active">Highlight active line</label>
+        <input type="checkbox" name="highlight_active" id="highlight_active" checked>        
+      </td>
       </tr>
     </table>
 
@@ -100,6 +104,10 @@ selectEl.onchange = function() {
 	}
 };
 
+var selectEl = document.getElementById("highlight_active");
+selectEl.onchange = function() {
+	editor.setHighlightActiveLine(!!selectEl.checked);
+};
 
 var container = document.getElementById("container");
 var editor = new ace.Editor(

src/Editor.js

@@ -15,7 +15,8 @@ ace.Editor = function(renderer, doc, mode) {
     ace.addTripleClickListener(container, ace.bind(this.onMouseTripleClick, this));
     ace.addMouseWheelListener(container, ace.bind(this.onMouseWheel, this));
 
-    this.selectionMarker = null;
+    this._selectionMarker = null;
+    this._highlightLineMarker = null;
     this._blockScrolling = false;
 
     this.renderer.draw();
@@ -141,18 +142,41 @@ ace.Editor.prototype.onCursorChange = function() {
     if (!this._blockScrolling) {
         this.renderer.scrollCursorIntoView();
     }
+    this._updateHighlightActiveLine();
+};
+
+ace.Editor.prototype._updateHighlightActiveLine = function() {
+    if (this._highlightLineMarker) {
+        this.renderer.removeMarker(this._highlightLineMarker);
+    }
+    this._highlightLineMarker = null;
+
+    if (this.getHighlightActiveLine() && !this.selection.isMultiLine()) {
+        var cursor = this.getCursorPosition();
+        var range = {
+            start: {
+                row: cursor.row,
+                column: 0
+            },
+            end: {
+                row: cursor.row+1,
+                column: 0
+            }
+        };
+        this._highlightLineMarker = this.renderer.addMarker(range, "active_line", "line");
+    }
 };
 
 ace.Editor.prototype.onSelectionChange = function() {
-    if (this.selectionMarker) {
-        this.renderer.removeMarker(this.selectionMarker);
+    if (this._selectionMarker) {
+        this.renderer.removeMarker(this._selectionMarker);
     }
-    this.selectionMarker = null;
+    this._selectionMarker = null;
 
     if (!this.selection.isEmpty()) {
         var range = this.selection.getRange();
         var style = this.getSelectionStyle();
-        this.selectionMarker = this.renderer.addMarker(range, "selection", style);
+        this._selectionMarker = this.renderer.addMarker(range, "selection", style);
     }
 
     this.onCursorChange();
@@ -274,6 +298,18 @@ ace.Editor.prototype.getSelectionStyle = function() {
     return this._selectionStyle;
 };
 
+ace.Editor.prototype._highlightActiveLine = true;
+ace.Editor.prototype.setHighlightActiveLine = function(shouldHighlight) {
+    if (this._highlightActiveLine == shouldHighlight) return;
+
+    this._highlightActiveLine = shouldHighlight;
+    this._updateHighlightActiveLine();
+};
+
+ace.Editor.prototype.getHighlightActiveLine = function() {
+    return this._highlightActiveLine;
+};
+
 ace.Editor.prototype.removeRight = function() {
     if (this.selection.isEmpty()) {
         this.selection.selectRight();

src/MarkerLayer.js

@@ -54,8 +54,8 @@ ace.MarkerLayer.prototype.update = function(config) {
 
         if (range.end.row > config.lastRow) {
             range.end = {
-                row: config.lastRow,
-                column: this.doc.getLine(config.lastRow).length
+                row: config.lastRow+1,
+                column: 0
             };
         }