add setLineClass method

Author: marijnh

lib/codemirror.js

@@ -22,7 +22,7 @@ var CodeMirror = (function() {
       '<div style="position: relative">' + // Set to the height of the text, causes scrolling
         '<pre style="position: absolute; visibility: hidden">' + // To measure line/char size
            '<span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span></pre>' +
-        '<div style="position: absolute">' + // Moved around its parent to cover visible view
+        '<div style="position: relative">' + // Moved around its parent to cover visible view
           '<div class="CodeMirror-gutter"><div class="CodeMirror-gutter-text"></div></div>' +
           '<div style="overflow: hidden; position: absolute; width: 0; left: 0">' + // Wraps and hides input textarea
             '<textarea style="height: 1px; position: absolute;" wrap="off"></textarea></div>' +
@@ -134,6 +134,7 @@ var CodeMirror = (function() {
       markText: operation(function(a, b, c){return operation(markText(a, b, c));}),
       setMarker: addGutterMarker,
       clearMarker: removeGutterMarker,
+      setLineClass: operation(setLineClass),
       lineInfo: lineInfo,
       addWidget: function(pos, node, scroll) {
         var pos = localCoords(clipPos(pos), true);
@@ -728,6 +729,7 @@ var CodeMirror = (function() {
           }
           else {
             node.innerHTML = lines[j].getHTML(ch1, ch2, false);
+            node.className = lines[j].className || "";
             node = node.nextSibling;
           }
         }
@@ -957,6 +959,20 @@ var CodeMirror = (function() {
       line.gutterMarker = null;
       updateGutter();
     }
+    function setLineClass(line, className) {
+      if (typeof line == "number") {
+        var no = line;
+        line = lines[clipLine(line)];
+      }
+      else {
+        var no = indexOf(lines, line);
+        if (no == -1) return null;
+      }
+      line.className = className;
+      changes.push({from: no, to: no + 1});
+      return line;
+    }
+
     function lineInfo(line) {
       if (typeof line == "number") {
         var n = line;
@@ -1459,7 +1475,7 @@ var CodeMirror = (function() {
     this.styles = styles || [text, null];
     this.stateAfter = null;
     this.text = text;
-    this.marked = null; this.gutterMarker = null;
+    this.marked = this.gutterMarker = this.className = null;
   }
   Line.prototype = {
     // Replace a piece of a line, keeping the styles around it intact.
@@ -1543,7 +1559,9 @@ var CodeMirror = (function() {
     // Produces an HTML fragment for the line, taking selection,
     // marking, and highlighting into account.
     getHTML: function(sfrom, sto, includePre) {
-      var html = includePre ? ["<pre>"] : [];
+      var html = [];
+      if (includePre)
+        html.push(this.className ? '<pre class="' + this.className + '">': "<pre>");
       function span(text, style) {
         if (!text) return;
         if (style) html.push('<span class="', style, '">', htmlEscape(text), "</span>");

manual.html

@@ -441,13 +441,17 @@ <h2 id="api">Programming API</h2>
       If this is not what you want, you can include the
       string <code>%N%</code> in the text, which will be replaced by
       the line number.</dd>
-
       <dt id="clearMarker"><code>clearMarker(line)</code></dt>
       <dd>Clears a marker created
       with <code>setMarker</code>. <code>line</code> can be either a
       number or a handle returned by <code>setMarker</code> (since a
       number may now refer to a different line if something was added
       or deleted).</dd>
+      <dt id="setLineClass"><code>setLineClass(line, className) → lineHandle</code></dt>
+      <dd>Set a CSS class name for the given line. <code>line</code>
+      can be a number or a line handle (as returned
+      by <code>setMarker</code> or this function).
+      Pass <code>null</code> to clear the class for a line.</dd>
 
       <dt id="lineInfo"><code>lineInfo(line) → object</code></dt>
       <dd>Returns the line number, text content, and marker status of