CodeMirror code editing added.

* codemirror2 repo has been added to IPython.
* Custom coloring used to match the qtconsole.

IPython/frontend/html/notebook/static/codemirror2/LICENSE

@@ -0,0 +1,19 b''
+Copyright (C) 2011 by Marijn Haverbeke <[e-mail]>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

IPython/frontend/html/notebook/static/codemirror2/lib/codemirror.css

@@ -0,0 +1,58 b''
+.CodeMirror {
+  overflow: hidden; /* Changed from auto to remove scrollbar */
+  height: auto; /* Changed to auto to autogrow */
+/*  line-height: 1em;*/
+  font-family: monospace;
+}
+
+.CodeMirror-gutter {
+  position: absolute; left: 0; top: 0;
+  background-color: #f7f7f7;
+  border-right: 1px solid #eee;
+  min-width: 2em;
+  height: 100%;
+}
+.CodeMirror-gutter-text {
+  color: #aaa;
+  text-align: right;
+  padding: .4em .2em .4em .4em;
+}
+.CodeMirror-lines {
+  /* Changed from 0.4em, but this gives us jitters upon typing, but I found
+     that removing .CodeMirror line-height: 1em above, it goes away. */
+  padding: 0em;
+}
+
+.CodeMirror pre {
+  -moz-border-radius: 0;
+  -webkit-border-radius: 0;
+  -o-border-radius: 0;
+  border-radius: 0;
+  border-width: 0; margin: 0; padding: 0; background: transparent;
+  font-family: inherit;
+}
+
+.CodeMirror textarea {
+  font-family: monospace !important;
+}
+
+.CodeMirror-cursor {
+  z-index: 10;
+  position: absolute;
+  visibility: hidden;
+  border-left: 1px solid black !important;
+}
+.CodeMirror-focused .CodeMirror-cursor {
+  visibility: visible;
+}
+
+span.CodeMirror-selected {
+  background: #ccc !important;
+  color: HighlightText !important;
+}
+.CodeMirror-focused span.CodeMirror-selected {
+  background: Highlight !important;
+}
+
+.CodeMirror-matchingbracket {color: #0f0 !important;}
+.CodeMirror-nonmatchingbracket {color: #f22 !important;}

IPython/frontend/html/notebook/static/codemirror2/lib/codemirror.js

@@ -0,0 +1,1985 b''
+// All functions that need access to the editor's state live inside
+// the CodeMirror function. Below that, at the bottom of the file,
+// some utilities are defined.
+
+// CodeMirror is the only global var we claim
+var CodeMirror = (function() {
+  // This is the function that produces an editor instance. It's
+  // closure is used to store the editor state.
+  function CodeMirror(place, givenOptions) {
+    // Determine effective options based on given values and defaults.
+    var options = {}, defaults = CodeMirror.defaults;
+    for (var opt in defaults)
+      if (defaults.hasOwnProperty(opt))
+        options[opt] = (givenOptions && givenOptions.hasOwnProperty(opt) ? givenOptions : defaults)[opt];
+
+    var targetDocument = options["document"];
+    // The element in which the editor lives. Takes care of scrolling
+    // (if enabled).
+    var wrapper = targetDocument.createElement("div");
+    wrapper.className = "CodeMirror";
+    // Work around http://www.quirksmode.org/bugreports/archives/2006/09/Overflow_Hidden_not_hiding.html
+    if (window.ActiveXObject && /MSIE [1-7]\b/.test(navigator.userAgent))
+      wrapper.style.position = "relative";
+    // This mess creates the base DOM structure for the editor.
+    wrapper.innerHTML =
+      '<div style="position: relative">' + // Set to the height of the text, causes scrolling
+        '<div style="position: absolute; height: 0; width: 0; overflow: hidden;"></div>' +
+        '<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: 1px; height: 0; left: 0">' + // Wraps and hides input textarea
+            '<textarea style="position: absolute; width: 100000px;" wrap="off"></textarea></div>' +
+          // Provides positioning relative to (visible) text origin
+          '<div class="CodeMirror-lines"><div style="position: relative">' +
+            '<pre class="CodeMirror-cursor">&#160;</pre>' + // Absolutely positioned blinky cursor
+            '<div></div></div></div></div></div>'; // This DIV contains the actual code
+    if (place.appendChild) place.appendChild(wrapper); else place(wrapper);
+    // I've never seen more elegant code in my life.
+    var code = wrapper.firstChild, measure = code.firstChild, mover = measure.nextSibling,
+        gutter = mover.firstChild, gutterText = gutter.firstChild,
+        inputDiv = gutter.nextSibling, input = inputDiv.firstChild,
+        lineSpace = inputDiv.nextSibling.firstChild, cursor = lineSpace.firstChild, lineDiv = cursor.nextSibling;
+    if (options.tabindex != null) input.tabindex = options.tabindex;
+    if (!options.gutter && !options.lineNumbers) gutter.style.display = "none";
+
+    // Delayed object wrap timeouts, making sure only one is active. blinker holds an interval.
+    var poll = new Delayed(), highlight = new Delayed(), blinker;
+
+    // mode holds a mode API object. lines an array of Line objects
+    // (see Line constructor), work an array of lines that should be
+    // parsed, and history the undo history (instance of History
+    // constructor).
+    var mode, lines = [new Line("")], work, history = new History(), focused;
+    loadMode();
+    // The selection. These are always maintained to point at valid
+    // positions. Inverted is used to remember that the user is
+    // selecting bottom-to-top.
+    var sel = {from: {line: 0, ch: 0}, to: {line: 0, ch: 0}, inverted: false};
+    // Selection-related flags. shiftSelecting obviously tracks
+    // whether the user is holding shift. reducedSelection is a hack
+    // to get around the fact that we can't create inverted
+    // selections. See below.
+    var shiftSelecting, reducedSelection, lastDoubleClick;
+    // Variables used by startOperation/endOperation to track what
+    // happened during the operation.
+    var updateInput, changes, textChanged, selectionChanged, leaveInputAlone;
+    // Current visible range (may be bigger than the view window).
+    var showingFrom = 0, showingTo = 0, lastHeight = 0, curKeyId = null;
+    // editing will hold an object describing the things we put in the
+    // textarea, to help figure out whether something changed.
+    // bracketHighlighted is used to remember that a backet has been
+    // marked.
+    var editing, bracketHighlighted;
+    // Tracks the maximum line length so that the horizontal scrollbar
+    // can be kept static when scrolling.
+    var maxLine = "";
+
+    // Initialize the content. Somewhat hacky (delayed prepareInput)
+    // to work around browser issues.
+    operation(function(){setValue(options.value || ""); updateInput = false;})();
+    setTimeout(prepareInput, 20);
+
+    // Register our event handlers.
+    connect(wrapper, "mousedown", operation(onMouseDown));
+    // Gecko browsers fire contextmenu *after* opening the menu, at
+    // which point we can't mess with it anymore. Context menu is
+    // handled in onMouseDown for Gecko.
+    if (!gecko) connect(wrapper, "contextmenu", operation(onContextMenu));
+    connect(code, "dblclick", operation(onDblClick));
+    connect(wrapper, "scroll", function() {updateDisplay([]); if (options.onScroll) options.onScroll(instance);});
+    connect(window, "resize", function() {updateDisplay(true);});
+    connect(input, "keyup", operation(onKeyUp));
+    connect(input, "keydown", operation(onKeyDown));
+    connect(input, "keypress", operation(onKeyPress));
+    connect(input, "focus", onFocus);
+    connect(input, "blur", onBlur);
+
+    connect(wrapper, "dragenter", function(e){e.stop();});
+    connect(wrapper, "dragover", function(e){e.stop();});
+    connect(wrapper, "drop", operation(onDrop));
+    connect(wrapper, "paste", function(){input.focus(); fastPoll();});
+    connect(input, "paste", function(){fastPoll();});
+    connect(input, "cut", function(){fastPoll();});
+
+    if (targetDocument.activeElement == input) onFocus();
+    else onBlur();
+
+    function isLine(l) {return l >= 0 && l < lines.length;}
+    // The instance object that we'll return. Mostly calls out to
+    // local functions in the CodeMirror function. Some do some extra
+    // range checking and/or clipping. operation is used to wrap the
+    // call so that changes it makes are tracked, and the display is
+    // updated afterwards.
+    var instance = {
+      getValue: getValue,
+      setValue: operation(setValue),
+      getSelection: getSelection,
+      replaceSelection: operation(replaceSelection),
+      focus: function(){input.focus(); onFocus(); fastPoll();},
+      setOption: function(option, value) {
+        options[option] = value;
+        if (option == "lineNumbers" || option == "gutter") gutterChanged();
+        else if (option == "mode" || option == "indentUnit") loadMode();
+      },
+      getOption: function(option) {return options[option];},
+      undo: operation(undo),
+      redo: operation(redo),
+      indentLine: operation(function(n) {if (isLine(n)) indentLine(n, "smart");}),
+      historySize: function() {return {undo: history.done.length, redo: history.undone.length};},
+      matchBrackets: operation(function(){matchBrackets(true);}),
+      getTokenAt: function(pos) {
+        pos = clipPos(pos);
+        return lines[pos.line].getTokenAt(mode, getStateBefore(pos.line), pos.ch);
+      },
+      cursorCoords: function(start){
+        if (start == null) start = sel.inverted;
+        return pageCoords(start ? sel.from : sel.to);
+      },
+      charCoords: function(pos){return pageCoords(clipPos(pos));},
+      coordsChar: function(coords) {
+        var off = eltOffset(lineSpace);
+        var line = clipLine(Math.min(lines.length - 1, showingFrom + Math.floor((coords.y - off.top) / lineHeight())));
+        return clipPos({line: line, ch: charFromX(clipLine(line), coords.x - off.left)});
+      },
+      getSearchCursor: function(query, pos, caseFold) {return new SearchCursor(query, pos, caseFold);},
+      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);
+        node.style.top = (showingFrom * lineHeight() + pos.yBot + paddingTop()) + "px";
+        node.style.left = (pos.x + paddingLeft()) + "px";
+        code.appendChild(node);
+        if (scroll)
+          scrollIntoView(pos.x, pos.yBot, pos.x + node.offsetWidth, pos.yBot + node.offsetHeight);
+      },
+
+      lineCount: function() {return lines.length;},
+      getCursor: function(start) {
+        if (start == null) start = sel.inverted;
+        return copyPos(start ? sel.from : sel.to);
+      },
+      somethingSelected: function() {return !posEq(sel.from, sel.to);},
+      setCursor: operation(function(line, ch) {
+        if (ch == null && typeof line.line == "number") setCursor(line.line, line.ch);
+        else setCursor(line, ch);
+      }),
+      setSelection: operation(function(from, to) {setSelection(clipPos(from), clipPos(to || from));}),
+      getLine: function(line) {if (isLine(line)) return lines[line].text;},
+      setLine: operation(function(line, text) {
+        if (isLine(line)) replaceRange(text, {line: line, ch: 0}, {line: line, ch: lines[line].text.length});
+      }),
+      removeLine: operation(function(line) {
+        if (isLine(line)) replaceRange("", {line: line, ch: 0}, clipPos({line: line+1, ch: 0}));
+      }),
+      replaceRange: operation(replaceRange),
+      getRange: function(from, to) {return getRange(clipPos(from), clipPos(to));},
+
+      operation: function(f){return operation(f)();},
+      refresh: function(){updateDisplay(true);},
+      getInputField: function(){return input;},
+      getWrapperElement: function(){return wrapper;}
+    };
+
+    function setValue(code) {
+      history = null;
+      var top = {line: 0, ch: 0};
+      updateLines(top, {line: lines.length - 1, ch: lines[lines.length-1].text.length},
+                  splitLines(code), top, top);
+      history = new History();
+    }
+    function getValue(code) {
+      var text = [];
+      for (var i = 0, l = lines.length; i < l; ++i)
+        text.push(lines[i].text);
+      return text.join("\n");
+    }
+
+    function onMouseDown(e) {
+      var ld = lastDoubleClick; lastDoubleClick = null;
+      // First, see if this is a click in the gutter
+      for (var n = e.target(); n != wrapper; n = n.parentNode)
+        if (n.parentNode == gutterText) {
+          if (options.onGutterClick)
+            options.onGutterClick(instance, indexOf(gutterText.childNodes, n) + showingFrom);
+          return e.stop();
+        }
+
+      if (gecko && e.button() == 3) onContextMenu(e);
+      if (e.button() != 1) return;
+      // For button 1, if it was clicked inside the editor
+      // (posFromMouse returning non-null), we have to adjust the
+      // selection.
+      var start = posFromMouse(e), last = start, going;
+      if (!start) {if (e.target() == wrapper) e.stop(); return;}
+
+      if (!focused) onFocus();
+      e.stop();
+      if (ld && +new Date - ld < 400) return selectLine(start.line);
+
+      setCursor(start.line, start.ch, true);
+      // And then we have to see if it's a drag event, in which case
+      // the dragged-over text must be selected.
+      function end() {
+        input.focus();
+        updateInput = true;
+        move(); up();
+      }
+      function extend(e) {
+        var cur = posFromMouse(e, true);
+        if (cur && !posEq(cur, last)) {
+          if (!focused) onFocus();
+          last = cur;
+          setSelectionUser(start, cur);
+          updateInput = false;
+          var visible = visibleLines();
+          if (cur.line >= visible.to || cur.line < visible.from)
+            going = setTimeout(operation(function(){extend(e);}), 150);
+        }
+      }
+
+      var move = connect(targetDocument, "mousemove", operation(function(e) {
+        clearTimeout(going);
+        e.stop();
+        extend(e);
+      }), true);
+      var up = connect(targetDocument, "mouseup", operation(function(e) {
+        clearTimeout(going);
+        var cur = posFromMouse(e);
+        if (cur) setSelectionUser(start, cur);
+        e.stop();
+        end();
+      }), true);
+    }
+    function onDblClick(e) {
+      var pos = posFromMouse(e);
+      if (!pos) return;
+      selectWordAt(pos);
+      e.stop();
+      lastDoubleClick = +new Date;
+    }
+    function onDrop(e) {
+      var pos = posFromMouse(e, true), files = e.e.dataTransfer.files;
+      if (!pos || options.readOnly) return;
+      if (files && files.length && window.FileReader && window.File) {
+        var n = files.length, text = Array(n), read = 0;
+        for (var i = 0; i < n; ++i) loadFile(files[i], i);
+        function loadFile(file, i) {
+          var reader = new FileReader;
+          reader.onload = function() {
+            text[i] = reader.result;
+            if (++read == n) replaceRange(text.join(""), clipPos(pos), clipPos(pos));
+          };
+          reader.readAsText(file);
+        }
+      }
+      else {
+        try {
+          var text = e.e.dataTransfer.getData("Text");
+          if (text) replaceRange(text, pos, pos);
+        }
+        catch(e){}
+      }
+    }
+    function onKeyDown(e) {
+      if (!focused) onFocus();
+
+      var code = e.e.keyCode;
+      // Tries to detect ctrl on non-mac, cmd on mac.
+      var mod = (mac ? e.e.metaKey : e.e.ctrlKey) && !e.e.altKey, anyMod = e.e.ctrlKey || e.e.altKey || e.e.metaKey;
+      if (code == 16 || e.e.shiftKey) shiftSelecting = shiftSelecting || (sel.inverted ? sel.to : sel.from);
+      else shiftSelecting = null;
+      // First give onKeyEvent option a chance to handle this.
+      if (options.onKeyEvent && options.onKeyEvent(instance, addStop(e.e))) return;
+
+      if (code == 33 || code == 34) {scrollPage(code == 34); return e.stop();} // page up/down
+      if (mod && ((code == 36 || code == 35) || // ctrl-home/end
+                  mac && (code == 38 || code == 40))) { // cmd-up/down
+        scrollEnd(code == 36 || code == 38); return e.stop();
+      }
+      if (mod && code == 65) {selectAll(); return e.stop();} // ctrl-a
+      if (!options.readOnly) {
+        if (!anyMod && code == 13) {return;} // enter
+        if (!anyMod && code == 9 && handleTab(e.e.shiftKey)) return e.stop(); // tab
+        if (mod && code == 90) {undo(); return e.stop();} // ctrl-z
+        if (mod && ((e.e.shiftKey && code == 90) || code == 89)) {redo(); return e.stop();} // ctrl-shift-z, ctrl-y
+      }
+
+      // Key id to use in the movementKeys map. We also pass it to
+      // fastPoll in order to 'self learn'. We need this because
+      // reducedSelection, the hack where we collapse the selection to
+      // its start when it is inverted and a movement key is pressed
+      // (and later restore it again), shouldn't be used for
+      // non-movement keys.
+      curKeyId = (mod ? "c" : "") + code;
+      if (sel.inverted && movementKeys.hasOwnProperty(curKeyId)) {
+        var range = selRange(input);
+        if (range) {
+          reducedSelection = {anchor: range.start};
+          setSelRange(input, range.start, range.start);
+        }
+      }
+      fastPoll(curKeyId);
+    }
+    function onKeyUp(e) {
+      if (reducedSelection) {
+        reducedSelection = null;
+        updateInput = true;
+      }
+      if (e.e.keyCode == 16) shiftSelecting = null;
+    }
+    function onKeyPress(e) {
+      if (options.onKeyEvent && options.onKeyEvent(instance, addStop(e.e))) return;
+      if (options.electricChars && mode.electricChars) {
+        var ch = String.fromCharCode(e.e.charCode == null ? e.e.keyCode : e.e.charCode);
+        if (mode.electricChars.indexOf(ch) > -1)
+          setTimeout(operation(function() {indentLine(sel.to.line, "smart");}), 50);
+      }
+      var code = e.e.keyCode;
+      // Re-stop tab and enter. Necessary on some browsers.
+      if (code == 13) {if (!options.readOnly) handleEnter(); e.stop();}
+      else if (!e.e.ctrlKey && !e.e.altKey && !e.e.metaKey && code == 9 && options.tabMode != "default") e.stop();
+      else fastPoll(curKeyId);
+    }
+
+    function onFocus() {
+      if (!focused && options.onFocus) options.onFocus(instance);
+      focused = true;
+      slowPoll();
+      if (wrapper.className.search(/\bCodeMirror-focused\b/) == -1)
+        wrapper.className += " CodeMirror-focused";
+      restartBlink();
+    }
+    function onBlur() {
+      if (focused && options.onBlur) options.onBlur(instance);
+      clearInterval(blinker);
+      shiftSelecting = null;
+      focused = false;
+      wrapper.className = wrapper.className.replace(" CodeMirror-focused", "");
+    }
+
+    // Replace the range from from to to by the strings in newText.
+    // Afterwards, set the selection to selFrom, selTo.
+    function updateLines(from, to, newText, selFrom, selTo) {
+      if (history) {
+        var old = [];
+        for (var i = from.line, e = to.line + 1; i < e; ++i) old.push(lines[i].text);
+        history.addChange(from.line, newText.length, old);
+        while (history.done.length > options.undoDepth) history.done.shift();
+      }
+      updateLinesNoUndo(from, to, newText, selFrom, selTo);
+    }
+    function unredoHelper(from, to) {
+      var change = from.pop();
+      if (change) {
+        var replaced = [], end = change.start + change.added;
+        for (var i = change.start; i < end; ++i) replaced.push(lines[i].text);
+        to.push({start: change.start, added: change.old.length, old: replaced});
+        var pos = clipPos({line: change.start + change.old.length - 1,
+                           ch: editEnd(replaced[replaced.length-1], change.old[change.old.length-1])});
+        updateLinesNoUndo({line: change.start, ch: 0}, {line: end - 1, ch: lines[end-1].text.length}, change.old, pos, pos);
+      }
+    }
+    function undo() {unredoHelper(history.done, history.undone);}
+    function redo() {unredoHelper(history.undone, history.done);}
+
+    function updateLinesNoUndo(from, to, newText, selFrom, selTo) {
+      var recomputeMaxLength = false, maxLineLength = maxLine.length;
+      for (var i = from.line; i < to.line; ++i) {
+        if (lines[i].text.length == maxLineLength) {recomputeMaxLength = true; break;}
+      }
+
+      var nlines = to.line - from.line, firstLine = lines[from.line], lastLine = lines[to.line];
+      // First adjust the line structure, taking some care to leave highlighting intact.
+      if (firstLine == lastLine) {
+        if (newText.length == 1)
+          firstLine.replace(from.ch, to.ch, newText[0]);
+        else {
+          lastLine = firstLine.split(to.ch, newText[newText.length-1]);
+          var spliceargs = [from.line + 1, nlines];
+          firstLine.replace(from.ch, firstLine.text.length, newText[0]);
+          for (var i = 1, e = newText.length - 1; i < e; ++i) spliceargs.push(new Line(newText[i]));
+          spliceargs.push(lastLine);
+          lines.splice.apply(lines, spliceargs);
+        }
+      }
+      else if (newText.length == 1) {
+        firstLine.replace(from.ch, firstLine.text.length, newText[0] + lastLine.text.slice(to.ch));
+        lines.splice(from.line + 1, nlines);
+      }
+      else {
+        var spliceargs = [from.line + 1, nlines - 1];
+        firstLine.replace(from.ch, firstLine.text.length, newText[0]);
+        lastLine.replace(0, to.ch, newText[newText.length-1]);
+        for (var i = 1, e = newText.length - 1; i < e; ++i) spliceargs.push(new Line(newText[i]));
+        lines.splice.apply(lines, spliceargs);
+      }
+
+
+      for (var i = from.line, e = i + newText.length; i < e; ++i) {
+        var l = lines[i].text;
+        if (l.length > maxLineLength) {
+          maxLine = l; maxLineLength = l.length;
+          recomputeMaxLength = false;
+        }
+      }
+      if (recomputeMaxLength) {
+        maxLineLength = 0;
+        for (var i = 0, e = lines.length; i < e; ++i) {
+          var l = lines[i].text;
+          if (l.length > maxLineLength) {
+            maxLineLength = l.length; maxLine = l;
+          }
+        }
+      }
+
+      // Add these lines to the work array, so that they will be
+      // highlighted. Adjust work lines if lines were added/removed.
+      var newWork = [], lendiff = newText.length - nlines - 1;
+      for (var i = 0, l = work.length; i < l; ++i) {
+        var task = work[i];
+        if (task < from.line) newWork.push(task);
+        else if (task > to.line) newWork.push(task + lendiff);
+      }
+      if (newText.length) newWork.push(from.line);
+      work = newWork;
+      startWorker(100);
+      // Remember that these lines changed, for updating the display
+      changes.push({from: from.line, to: to.line + 1, diff: lendiff});
+      textChanged = {from: from, to: to, text: newText};
+
+      // Update the selection
+      function updateLine(n) {return n <= Math.min(to.line, to.line + lendiff) ? n : n + lendiff;}
+      setSelection(selFrom, selTo, updateLine(sel.from.line), updateLine(sel.to.line));
+
+      // Make sure the scroll-size div has the correct height.
+      code.style.height = (lines.length * lineHeight() + 2 * paddingTop()) + "px";
+    }
+
+    function replaceRange(code, from, to) {
+      from = clipPos(from);
+      if (!to) to = from; else to = clipPos(to);
+      code = splitLines(code);
+      function adjustPos(pos) {
+        if (posLess(pos, from)) return pos;
+        if (!posLess(to, pos)) return end;
+        var line = pos.line + code.length - (to.line - from.line) - 1;
+        var ch = pos.ch;
+        if (pos.line == to.line)
+          ch += code[code.length-1].length - (to.ch - (to.line == from.line ? from.ch : 0));
+        return {line: line, ch: ch};
+      }
+      var end;
+      replaceRange1(code, from, to, function(end1) {
+        end = end1;
+        return {from: adjustPos(sel.from), to: adjustPos(sel.to)};
+      });
+      return end;
+    }
+    function replaceSelection(code, collapse) {
+      replaceRange1(splitLines(code), sel.from, sel.to, function(end) {
+        if (collapse == "end") return {from: end, to: end};
+        else if (collapse == "start") return {from: sel.from, to: sel.from};
+        else return {from: sel.from, to: end};
+      });
+    }
+    function replaceRange1(code, from, to, computeSel) {
+      var endch = code.length == 1 ? code[0].length + from.ch : code[code.length-1].length;
+      var newSel = computeSel({line: from.line + code.length - 1, ch: endch});
+      updateLines(from, to, code, newSel.from, newSel.to);
+    }
+
+    function getRange(from, to) {
+      var l1 = from.line, l2 = to.line;
+      if (l1 == l2) return lines[l1].text.slice(from.ch, to.ch);
+      var code = [lines[l1].text.slice(from.ch)];
+      for (var i = l1 + 1; i < l2; ++i) code.push(lines[i].text);
+      code.push(lines[l2].text.slice(0, to.ch));
+      return code.join("\n");
+    }
+    function getSelection() {
+      return getRange(sel.from, sel.to);
+    }
+
+    var pollingFast = false; // Ensures slowPoll doesn't cancel fastPoll
+    function slowPoll() {
+      if (pollingFast) return;
+      poll.set(2000, function() {
+        startOperation();
+        readInput();
+        if (focused) slowPoll();
+        endOperation();
+      });
+    }
+    function fastPoll(keyId) {
+      var missed = false;
+      pollingFast = true;
+      function p() {
+        startOperation();
+        var changed = readInput();
+        if (changed == "moved" && keyId) movementKeys[keyId] = true;
+        if (!changed && !missed) {missed = true; poll.set(80, p);}
+        else {pollingFast = false; slowPoll();}
+        endOperation();
+      }
+      poll.set(20, p);
+    }
+
+    // Inspects the textarea, compares its state (content, selection)
+    // to the data in the editing variable, and updates the editor
+    // content or cursor if something changed.
+    function readInput() {
+      var changed = false, text = input.value, sr = selRange(input);
+      if (!sr) return false;
+      var changed = editing.text != text, rs = reducedSelection;
+      var moved = changed || sr.start != editing.start || sr.end != (rs ? editing.start : editing.end);
+      if (!moved && !rs) return false;
+      if (changed) {
+        shiftSelecting = reducedSelection = null;
+        if (options.readOnly) {updateInput = true; return "changed";}
+      }
+
+      // Compute selection start and end based on start/end offsets in textarea
+      function computeOffset(n, startLine) {
+        var pos = 0;
+        for (;;) {
+          var found = text.indexOf("\n", pos);
+          if (found == -1 || (text.charAt(found-1) == "\r" ? found - 1 : found) >= n)
+            return {line: startLine, ch: n - pos};
+          ++startLine;
+          pos = found + 1;
+        }
+      }
+      var from = computeOffset(sr.start, editing.from),
+          to = computeOffset(sr.end, editing.from);
+      // Here we have to take the reducedSelection hack into account,
+      // so that you can, for example, press shift-up at the start of
+      // your selection and have the right thing happen.
+      if (rs) {
+        from = sr.start == rs.anchor ? to : from;
+        to = shiftSelecting ? sel.to : sr.start == rs.anchor ? from : to;
+        if (!posLess(from, to)) {
+          reducedSelection = null;
+          sel.inverted = false;
+          var tmp = from; from = to; to = tmp;
+        }
+      }
+
+      // In some cases (cursor on same line as before), we don't have
+      // to update the textarea content at all.
+      if (from.line == to.line && from.line == sel.from.line && from.line == sel.to.line && !shiftSelecting)
+        updateInput = false;
+
+      // Magic mess to extract precise edited range from the changed
+      // string.
+      if (changed) {
+        var start = 0, end = text.length, len = Math.min(end, editing.text.length);
+        var c, line = editing.from, nl = -1;
+        while (start < len && (c = text.charAt(start)) == editing.text.charAt(start)) {
+          ++start;
+          if (c == "\n") {line++; nl = start;}
+        }
+        var ch = nl > -1 ? start - nl : start, endline = editing.to - 1, edend = editing.text.length;
+        for (;;) {
+          c = editing.text.charAt(edend);
+          if (c == "\n") endline--;
+          if (text.charAt(end) != c) {++end; ++edend; break;}
+          if (edend <= start || end <= start) break;
+          --end; --edend;
+        }
+        var nl = editing.text.lastIndexOf("\n", edend - 1), endch = nl == -1 ? edend : edend - nl - 1;
+        updateLines({line: line, ch: ch}, {line: endline, ch: endch}, splitLines(text.slice(start, end)), from, to);
+        if (line != endline || from.line != line) updateInput = true;
+      }
+      else setSelection(from, to);
+
+      editing.text = text; editing.start = sr.start; editing.end = sr.end;
+      return changed ? "changed" : moved ? "moved" : false;
+    }
+
+    // Set the textarea content and selection range to match the
+    // editor state.
+    function prepareInput() {
+      var text = [];
+      var from = Math.max(0, sel.from.line - 1), to = Math.min(lines.length, sel.to.line + 2);
+      for (var i = from; i < to; ++i) text.push(lines[i].text);
+      text = input.value = text.join(lineSep);
+      var startch = sel.from.ch, endch = sel.to.ch;
+      for (var i = from; i < sel.from.line; ++i)
+        startch += lineSep.length + lines[i].text.length;
+      for (var i = from; i < sel.to.line; ++i)
+        endch += lineSep.length + lines[i].text.length;
+      editing = {text: text, from: from, to: to, start: startch, end: endch};
+      setSelRange(input, startch, reducedSelection ? startch : endch);
+    }
+
+    function scrollCursorIntoView() {
+      var cursor = localCoords(sel.inverted ? sel.from : sel.to);
+      return scrollIntoView(cursor.x, cursor.y, cursor.x, cursor.yBot);
+    }
+    function scrollIntoView(x1, y1, x2, y2) {
+      var pl = paddingLeft(), pt = paddingTop(), lh = lineHeight();
+      y1 += pt; y2 += pt; x1 += pl; x2 += pl;
+      var screen = wrapper.clientHeight, screentop = wrapper.scrollTop, scrolled = false, result = true;
+      if (y1 < screentop) {wrapper.scrollTop = Math.max(0, y1 - 2*lh); scrolled = true;}
+      else if (y2 > screentop + screen) {wrapper.scrollTop = y2 + lh - screen; scrolled = true;}
+
+      var screenw = wrapper.clientWidth, screenleft = wrapper.scrollLeft;
+      if (x1 < screenleft) {wrapper.scrollLeft = Math.max(0, x1 - 10); scrolled = true;}
+      else if (x2 > screenw + screenleft) {
+        wrapper.scrollLeft = x2 + 10 - screenw;
+        scrolled = true;
+        if (x2 > code.clientWidth) result = false;
+      }
+      if (scrolled && options.onScroll) options.onScroll(instance);
+      return result;
+    }
+
+    function visibleLines() {
+      var lh = lineHeight(), top = wrapper.scrollTop - paddingTop();
+      return {from: Math.min(lines.length, Math.max(0, Math.floor(top / lh))),
+              to: Math.min(lines.length, Math.ceil((top + wrapper.clientHeight) / lh))};
+    }
+    // Uses a set of changes plus the current scroll position to
+    // determine which DOM updates have to be made, and makes the
+    // updates.
+    function updateDisplay(changes) {
+      if (!wrapper.clientWidth) {
+        showingFrom = showingTo = 0;
+        return;
+      }
+      // First create a range of theoretically intact lines, and punch
+      // holes in that using the change info.
+      var intact = changes === true ? [] : [{from: showingFrom, to: showingTo, domStart: 0}];
+      for (var i = 0, l = changes.length || 0; i < l; ++i) {
+        var change = changes[i], intact2 = [], diff = change.diff || 0;
+        for (var j = 0, l2 = intact.length; j < l2; ++j) {
+          var range = intact[j];
+          if (change.to <= range.from)
+            intact2.push({from: range.from + diff, to: range.to + diff, domStart: range.domStart});
+          else if (range.to <= change.from)
+            intact2.push(range);
+          else {
+            if (change.from > range.from)
+              intact2.push({from: range.from, to: change.from, domStart: range.domStart})
+            if (change.to < range.to)
+              intact2.push({from: change.to + diff, to: range.to + diff,
+                            domStart: range.domStart + (change.to - range.from)});
+          }
+        }
+        intact = intact2;
+      }
+
+      // Then, determine which lines we'd want to see, and which
+      // updates have to be made to get there.
+      var visible = visibleLines();
+      var from = Math.min(showingFrom, Math.max(visible.from - 3, 0)),
+          to = Math.min(lines.length, Math.max(showingTo, visible.to + 3)),
+          updates = [], domPos = 0, domEnd = showingTo - showingFrom, pos = from, changedLines = 0;
+
+      for (var i = 0, l = intact.length; i < l; ++i) {
+        var range = intact[i];
+        if (range.to <= from) continue;
+        if (range.from >= to) break;
+        if (range.domStart > domPos || range.from > pos) {
+          updates.push({from: pos, to: range.from, domSize: range.domStart - domPos, domStart: domPos});
+          changedLines += range.from - pos;
+        }
+        pos = range.to;
+        domPos = range.domStart + (range.to - range.from);
+      }
+      if (domPos != domEnd || pos != to) {
+        changedLines += Math.abs(to - pos);
+        updates.push({from: pos, to: to, domSize: domEnd - domPos, domStart: domPos});
+      }
+
+      if (!updates.length) return;
+      lineDiv.style.display = "none";
+      // If more than 30% of the screen needs update, just do a full
+      // redraw (which is quicker than patching)
+      if (changedLines > (visible.to - visible.from) * .3)
+        refreshDisplay(from = Math.max(visible.from - 10, 0), to = Math.min(visible.to + 7, lines.length));
+      // Otherwise, only update the stuff that needs updating.
+      else
+        patchDisplay(updates);
+      lineDiv.style.display = "";
+
+      // Position the mover div to align with the lines it's supposed
+      // to be showing (which will cover the visible display)
+      var different = from != showingFrom || to != showingTo || lastHeight != wrapper.clientHeight;
+      showingFrom = from; showingTo = to;
+      mover.style.top = (from * lineHeight()) + "px";
+      if (different) {
+        lastHeight = wrapper.clientHeight;
+        code.style.height = (lines.length * lineHeight() + 2 * paddingTop()) + "px";
+        updateGutter();
+      }
+
+      var textWidth = stringWidth(maxLine);
+      lineSpace.style.width = textWidth > wrapper.clientWidth ? textWidth + "px" : "";
+
+      // Since this is all rather error prone, it is honoured with the
+      // only assertion in the whole file.
+      if (lineDiv.childNodes.length != showingTo - showingFrom)
+        throw new Error("BAD PATCH! " + JSON.stringify(updates) + " size=" + (showingTo - showingFrom) +
+                        " nodes=" + lineDiv.childNodes.length);
+      updateCursor();
+    }
+
+    function refreshDisplay(from, to) {
+      var html = [], start = {line: from, ch: 0}, inSel = posLess(sel.from, start) && !posLess(sel.to, start);
+      for (var i = from; i < to; ++i) {
+        var ch1 = null, ch2 = null;
+        if (inSel) {
+          ch1 = 0;
+          if (sel.to.line == i) {inSel = false; ch2 = sel.to.ch;}
+        }
+        else if (sel.from.line == i) {
+          if (sel.to.line == i) {ch1 = sel.from.ch; ch2 = sel.to.ch;}
+          else {inSel = true; ch1 = sel.from.ch;}
+        }
+        html.push(lines[i].getHTML(ch1, ch2, true));
+      }
+      lineDiv.innerHTML = html.join("");
+    }
+    function patchDisplay(updates) {
+      // Slightly different algorithm for IE (badInnerHTML), since
+      // there .innerHTML on PRE nodes is dumb, and discards
+      // whitespace.
+      var sfrom = sel.from.line, sto = sel.to.line, off = 0,
+          scratch = badInnerHTML && targetDocument.createElement("div");
+      for (var i = 0, e = updates.length; i < e; ++i) {
+        var rec = updates[i];
+        var extra = (rec.to - rec.from) - rec.domSize;
+        var nodeAfter = lineDiv.childNodes[rec.domStart + rec.domSize + off] || null;
+        if (badInnerHTML)
+          for (var j = Math.max(-extra, rec.domSize); j > 0; --j)
+            lineDiv.removeChild(nodeAfter ? nodeAfter.previousSibling : lineDiv.lastChild);
+        else if (extra) {
+          for (var j = Math.max(0, extra); j > 0; --j)
+            lineDiv.insertBefore(targetDocument.createElement("pre"), nodeAfter);
+          for (var j = Math.max(0, -extra); j > 0; --j)
+            lineDiv.removeChild(nodeAfter ? nodeAfter.previousSibling : lineDiv.lastChild);
+        }
+        var node = lineDiv.childNodes[rec.domStart + off], inSel = sfrom < rec.from && sto >= rec.from;
+        for (var j = rec.from; j < rec.to; ++j) {
+          var ch1 = null, ch2 = null;
+          if (inSel) {
+            ch1 = 0;
+            if (sto == j) {inSel = false; ch2 = sel.to.ch;}
+          }
+          else if (sfrom == j) {
+            if (sto == j) {ch1 = sel.from.ch; ch2 = sel.to.ch;}
+            else {inSel = true; ch1 = sel.from.ch;}
+          }
+          if (badInnerHTML) {
+            scratch.innerHTML = lines[j].getHTML(ch1, ch2, true);
+            lineDiv.insertBefore(scratch.firstChild, nodeAfter);
+          }
+          else {
+            node.innerHTML = lines[j].getHTML(ch1, ch2, false);
+            node.className = lines[j].className || "";
+            node = node.nextSibling;
+          }
+        }
+        off += extra;
+      }
+    }
+
+    function updateGutter() {
+      if (!options.gutter && !options.lineNumbers) return;
+      var hText = mover.offsetHeight, hEditor = wrapper.clientHeight;
+      gutter.style.height = (hText - hEditor < 2 ? hEditor : hText) + "px";
+      var html = [];
+      for (var i = showingFrom; i < showingTo; ++i) {
+        var marker = lines[i].gutterMarker;
+        var text = options.lineNumbers ? i + options.firstLineNumber : null;
+        if (marker && marker.text)
+          text = marker.text.replace("%N%", text != null ? text : "");
+        else if (text == null)
+          text = "\u00a0";
+        html.push((marker && marker.style ? '<pre class="' + marker.style + '">' : "<pre>"), text, "</pre>");
+      }
+      gutter.style.display = "none";
+      gutterText.innerHTML = html.join("");
+      var minwidth = String(lines.length).length, firstNode = gutterText.firstChild, val = eltText(firstNode), pad = "";
+      while (val.length + pad.length < minwidth) pad += "\u00a0";
+      if (pad) firstNode.insertBefore(targetDocument.createTextNode(pad), firstNode.firstChild);
+      gutter.style.display = "";
+      lineSpace.style.marginLeft = gutter.offsetWidth + "px";
+    }
+    function updateCursor() {
+      var head = sel.inverted ? sel.from : sel.to;
+      var x = charX(head.line, head.ch) + "px", y = (head.line - showingFrom) * lineHeight() + "px";
+      inputDiv.style.top = y;
+      if (posEq(sel.from, sel.to)) {
+        cursor.style.top = y; cursor.style.left = x;
+        cursor.style.display = "";
+      }
+      else cursor.style.display = "none";
+    }
+
+    function setSelectionUser(from, to) {
+      var sh = shiftSelecting && clipPos(shiftSelecting);
+      if (sh) {
+        if (posLess(sh, from)) from = sh;
+        else if (posLess(to, sh)) to = sh;
+      }
+      setSelection(from, to);
+    }
+    // Update the selection. Last two args are only used by
+    // updateLines, since they have to be expressed in the line
+    // numbers before the update.
+    function setSelection(from, to, oldFrom, oldTo) {
+      if (posEq(sel.from, from) && posEq(sel.to, to)) return;
+      if (posLess(to, from)) {var tmp = to; to = from; from = tmp;}
+
+      var startEq = posEq(sel.to, to), endEq = posEq(sel.from, from);
+      if (posEq(from, to)) sel.inverted = false;
+      else if (startEq && !endEq) sel.inverted = true;
+      else if (endEq && !startEq) sel.inverted = false;
+
+      // Some ugly logic used to only mark the lines that actually did
+      // see a change in selection as changed, rather than the whole
+      // selected range.
+      if (oldFrom == null) {oldFrom = sel.from.line; oldTo = sel.to.line;}
+      if (posEq(from, to)) {
+        if (!posEq(sel.from, sel.to))
+          changes.push({from: oldFrom, to: oldTo + 1});
+      }
+      else if (posEq(sel.from, sel.to)) {
+        changes.push({from: from.line, to: to.line + 1});
+      }
+      else {
+        if (!posEq(from, sel.from)) {
+          if (from.line < oldFrom)
+            changes.push({from: from.line, to: Math.min(to.line, oldFrom) + 1});
+          else
+            changes.push({from: oldFrom, to: Math.min(oldTo, from.line) + 1});
+        }
+        if (!posEq(to, sel.to)) {
+          if (to.line < oldTo)
+            changes.push({from: Math.max(oldFrom, from.line), to: oldTo + 1});
+          else
+            changes.push({from: Math.max(from.line, oldTo), to: to.line + 1});
+        }
+      }
+      sel.from = from; sel.to = to;
+      selectionChanged = true;
+    }
+    function setCursor(line, ch, user) {
+      var pos = clipPos({line: line, ch: ch || 0});
+      (user ? setSelectionUser : setSelection)(pos, pos);
+    }
+
+    function clipLine(n) {return Math.max(0, Math.min(n, lines.length-1));}
+    function clipPos(pos) {
+      if (pos.line < 0) return {line: 0, ch: 0};
+      if (pos.line >= lines.length) return {line: lines.length-1, ch: lines[lines.length-1].text.length};
+      var ch = pos.ch, linelen = lines[pos.line].text.length;
+      if (ch == null || ch > linelen) return {line: pos.line, ch: linelen};
+      else if (ch < 0) return {line: pos.line, ch: 0};
+      else return pos;
+    }
+
+    function scrollPage(down) {
+      var linesPerPage = Math.floor(wrapper.clientHeight / lineHeight()), head = sel.inverted ? sel.from : sel.to;
+      setCursor(head.line + (Math.max(linesPerPage - 1, 1) * (down ? 1 : -1)), head.ch, true);
+    }
+    function scrollEnd(top) {
+      setCursor(top ? 0 : lines.length - 1, true);
+    }
+    function selectAll() {
+      var endLine = lines.length - 1;
+      setSelection({line: 0, ch: 0}, {line: endLine, ch: lines[endLine].text.length});
+    }
+    function selectWordAt(pos) {
+      var line = lines[pos.line].text;
+      var start = pos.ch, end = pos.ch;
+      while (start > 0 && /\w/.test(line.charAt(start - 1))) --start;
+      while (end < line.length && /\w/.test(line.charAt(end))) ++end;
+      setSelectionUser({line: pos.line, ch: start}, {line: pos.line, ch: end});
+    }
+    function selectLine(line) {
+      setSelectionUser({line: line, ch: 0}, {line: line, ch: lines[line].text.length});
+    }
+    function handleEnter() {
+      replaceSelection("\n", "end");
+      if (options.enterMode != "flat")
+        indentLine(sel.from.line, options.enterMode == "keep" ? "prev" : "smart");
+    }
+    function handleTab(shift) {
+      shiftSelecting = null;
+      switch (options.tabMode) {
+      case "default":
+        return false;
+      case "indent":
+        for (var i = sel.from.line, e = sel.to.line; i <= e; ++i) indentLine(i, "smart");
+        break;
+      case "classic":
+        if (posEq(sel.from, sel.to)) {
+          if (shift) indentLine(sel.from.line, "smart");
+          else replaceSelection("\t", "end");
+          break;
+        }
+      case "shift":
+        for (var i = sel.from.line, e = sel.to.line; i <= e; ++i) indentLine(i, shift ? "subtract" : "add");
+        break;
+      }
+      return true;
+    }
+
+    function indentLine(n, how) {
+      if (how == "smart") {
+        if (!mode.indent) how = "prev";
+        else var state = getStateBefore(n);
+      }
+
+      var line = lines[n], curSpace = line.indentation(), curSpaceString = line.text.match(/^\s*/)[0], indentation;
+      if (how == "prev") {
+        if (n) indentation = lines[n-1].indentation();
+        else indentation = 0;
+      }
+      else if (how == "smart") indentation = mode.indent(state, line.text.slice(curSpaceString.length));
+      else if (how == "add") indentation = curSpace + options.indentUnit;
+      else if (how == "subtract") indentation = curSpace - options.indentUnit;
+      indentation = Math.max(0, indentation);
+      var diff = indentation - curSpace;
+
+      if (!diff) {
+        if (sel.from.line != n && sel.to.line != n) return;
+        var indentString = curSpaceString;
+      }
+      else {
+        var indentString = "", pos = 0;
+        if (options.indentWithTabs)
+          for (var i = Math.floor(indentation / tabSize); i; --i) {pos += tabSize; indentString += "\t";}
+        while (pos < indentation) {++pos; indentString += " ";}
+      }
+
+      replaceRange(indentString, {line: n, ch: 0}, {line: n, ch: curSpaceString.length});
+    }
+
+    function loadMode() {
+      mode = CodeMirror.getMode(options, options.mode);
+      for (var i = 0, l = lines.length; i < l; ++i)
+        lines[i].stateAfter = null;
+      work = [0];
+      startWorker();
+    }
+    function gutterChanged() {
+      var visible = options.gutter || options.lineNumbers;
+      gutter.style.display = visible ? "" : "none";
+      if (visible) updateGutter();
+      else lineDiv.parentNode.style.marginLeft = 0;
+    }
+
+    function markText(from, to, className) {
+      from = clipPos(from); to = clipPos(to);
+      var accum = [];
+      function add(line, from, to, className) {
+        var line = lines[line], mark = line.addMark(from, to, className);
+        mark.line = line;
+        accum.push(mark);
+      }
+      if (from.line == to.line) add(from.line, from.ch, to.ch, className);
+      else {
+        add(from.line, from.ch, null, className);
+        for (var i = from.line + 1, e = to.line; i < e; ++i)
+          add(i, 0, null, className);
+        add(to.line, 0, to.ch, className);
+      }
+      changes.push({from: from.line, to: to.line + 1});
+      return function() {
+        var start, end;
+        for (var i = 0; i < accum.length; ++i) {
+          var mark = accum[i], found = indexOf(lines, mark.line);
+          mark.line.removeMark(mark);
+          if (found > -1) {
+            if (start == null) start = found;
+            end = found;
+          }
+        }
+        if (start != null) changes.push({from: start, to: end + 1});
+      };
+    }
+
+    function addGutterMarker(line, text, className) {
+      if (typeof line == "number") line = lines[clipLine(line)];
+      line.gutterMarker = {text: text, style: className};
+      updateGutter();
+      return line;
+    }
+    function removeGutterMarker(line) {
+      if (typeof line == "number") line = lines[clipLine(line)];
+      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;
+        line = lines[line];
+        if (!line) return null;
+      }
+      else {
+        var n = indexOf(lines, line);
+        if (n == -1) return null;
+      }
+      var marker = line.gutterMarker;
+      return {line: n, text: line.text, markerText: marker && marker.text, markerClass: marker && marker.style};
+    }
+
+    function stringWidth(str) {
+      measure.innerHTML = "<pre><span>x</span></pre>";
+      measure.firstChild.firstChild.firstChild.nodeValue = str;
+      return measure.firstChild.firstChild.offsetWidth || 10;
+    }
+    // These are used to go from pixel positions to character
+    // positions, taking varying character widths into account.
+    function charX(line, pos) {
+      if (pos == 0) return 0;
+      measure.innerHTML = "<pre><span>" + lines[line].getHTML(null, null, false, pos) + "</span></pre>";
+      return measure.firstChild.firstChild.offsetWidth;
+    }
+    function charFromX(line, x) {
+      if (x <= 0) return 0;
+      var lineObj = lines[line], text = lineObj.text;
+      function getX(len) {
+        measure.innerHTML = "<pre><span>" + lineObj.getHTML(null, null, false, len) + "</span></pre>";
+        return measure.firstChild.firstChild.offsetWidth;
+      }
+      var from = 0, fromX = 0, to = text.length, toX;
+      // Guess a suitable upper bound for our search.
+      var estimated = Math.min(to, Math.ceil(x / stringWidth("x")));
+      for (;;) {
+        var estX = getX(estimated);
+        if (estX <= x && estimated < to) estimated = Math.min(to, Math.ceil(estimated * 1.2));
+        else {toX = estX; to = estimated; break;}
+      }
+      if (x > toX) return to;
+      // Try to guess a suitable lower bound as well.
+      estimated = Math.floor(to * 0.8); estX = getX(estimated);
+      if (estX < x) {from = estimated; fromX = estX;}
+      // Do a binary search between these bounds.
+      for (;;) {
+        if (to - from <= 1) return (toX - x > x - fromX) ? from : to;
+        var middle = Math.ceil((from + to) / 2), middleX = getX(middle);
+        if (middleX > x) {to = middle; toX = middleX;}
+        else {from = middle; fromX = middleX;}
+      }
+    }
+
+    function localCoords(pos, inLineWrap) {
+      var lh = lineHeight(), line = pos.line - (inLineWrap ? showingFrom : 0);
+      return {x: charX(pos.line, pos.ch), y: line * lh, yBot: (line + 1) * lh};
+    }
+    function pageCoords(pos) {
+      var local = localCoords(pos, true), off = eltOffset(lineSpace);
+      return {x: off.left + local.x, y: off.top + local.y, yBot: off.top + local.yBot};
+    }
+
+    function lineHeight() {
+      var nlines = lineDiv.childNodes.length;
+      if (nlines) return lineDiv.offsetHeight / nlines;
+      measure.innerHTML = "<pre>x</pre>";
+      return measure.firstChild.offsetHeight || 1;
+    }
+    function paddingTop() {return lineSpace.offsetTop;}
+    function paddingLeft() {return lineSpace.offsetLeft;}
+
+    function posFromMouse(e, liberal) {
+      var offW = eltOffset(wrapper), x = e.pageX(), y = e.pageY();
+      // This is a mess of a heuristic to try and determine whether a
+      // scroll-bar was clicked or not, and to return null if one was
+      // (and !liberal).
+      if (!liberal && (x - offW.left > wrapper.clientWidth || y - offW.top > wrapper.clientHeight))
+        return null;
+      var offL = eltOffset(lineSpace);
+      var line = showingFrom + Math.floor((y - offL.top) / lineHeight());
+      return clipPos({line: line, ch: charFromX(clipLine(line), x - offL.left)});
+    }
+    function onContextMenu(e) {
+      var pos = posFromMouse(e);
+      if (!pos || window.opera) return; // Opera is difficult.
+      if (posEq(sel.from, sel.to) || posLess(pos, sel.from) || !posLess(pos, sel.to))
+        setCursor(pos.line, pos.ch);
+
+      var oldCSS = input.style.cssText;
+      input.style.cssText = "position: fixed; width: 30px; height: 30px; top: " + (e.pageY() - 1) +
+        "px; left: " + (e.pageX() - 1) + "px; z-index: 1000; background: white; " +
+        "border-width: 0; outline: none; overflow: hidden;";
+      var val = input.value = getSelection();
+      input.focus();
+      setSelRange(input, 0, val.length);
+      if (gecko) e.stop();
+      leaveInputAlone = true;
+      setTimeout(function() {
+        if (input.value != val) operation(replaceSelection)(input.value, "end");
+        input.style.cssText = oldCSS;
+        leaveInputAlone = false;
+        prepareInput();
+        slowPoll();
+      }, 50);
+    }
+
+    // Cursor-blinking
+    function restartBlink() {
+      clearInterval(blinker);
+      var on = true;
+      cursor.style.visibility = "";
+      blinker = setInterval(function() {
+        cursor.style.visibility = (on = !on) ? "" : "hidden";
+      }, 650);
+    }
+
+    var matching = {"(": ")>", ")": "(<", "[": "]>", "]": "[<", "{": "}>", "}": "{<"};
+    function matchBrackets(autoclear) {
+      var head = sel.inverted ? sel.from : sel.to, line = lines[head.line], pos = head.ch - 1;
+      var match = (pos >= 0 && matching[line.text.charAt(pos)]) || matching[line.text.charAt(++pos)];
+      if (!match) return;
+      var ch = match.charAt(0), forward = match.charAt(1) == ">", d = forward ? 1 : -1, st = line.styles;
+      for (var off = pos + 1, i = 0, e = st.length; i < e; i+=2)
+        if ((off -= st[i].length) <= 0) {var style = st[i+1]; break;}
+
+      var stack = [line.text.charAt(pos)], re = /[(){}[\]]/;
+      function scan(line, from, to) {
+        if (!line.text) return;
+        var st = line.styles, pos = forward ? 0 : line.text.length - 1, cur;
+        for (var i = forward ? 0 : st.length - 2, e = forward ? st.length : -2; i != e; i += 2*d) {
+          var text = st[i];
+          if (st[i+1] != null && st[i+1] != style) {pos += d * text.length; continue;}
+          for (var j = forward ? 0 : text.length - 1, te = forward ? text.length : -1; j != te; j += d, pos+=d) {
+            if (pos >= from && pos < to && re.test(cur = text.charAt(j))) {
+              var match = matching[cur];
+              if (match.charAt(1) == ">" == forward) stack.push(cur);
+              else if (stack.pop() != match.charAt(0)) return {pos: pos, match: false};
+              else if (!stack.length) return {pos: pos, match: true};
+            }
+          }
+        }
+      }
+      for (var i = head.line, e = forward ? Math.min(i + 50, lines.length) : Math.max(-1, i - 50); i != e; i+=d) {
+        var line = lines[i], first = i == head.line;
+        var found = scan(line, first && forward ? pos + 1 : 0, first && !forward ? pos : line.text.length);
+        if (found) {
+          var style = found.match ? "CodeMirror-matchingbracket" : "CodeMirror-nonmatchingbracket";
+          var one = markText({line: head.line, ch: pos}, {line: head.line, ch: pos+1}, style),
+              two = markText({line: i, ch: found.pos}, {line: i, ch: found.pos + 1}, style);
+          var clear = operation(function(){one(); two();});
+          if (autoclear) setTimeout(clear, 800);
+          else bracketHighlighted = clear;
+          break;
+        }
+      }
+    }
+
+    // Finds the line to start with when starting a parse. Tries to
+    // find a line with a stateAfter, so that it can start with a
+    // valid state. If that fails, it returns the line with the
+    // smallest indentation, which tends to need the least context to
+    // parse correctly.
+    function findStartLine(n) {
+      var minindent, minline;
+      for (var search = n, lim = n - 40; search > lim; --search) {
+        if (search == 0) return 0;
+        var line = lines[search-1];
+        if (line.stateAfter) return search;
+        var indented = line.indentation();
+        if (minline == null || minindent > indented) {
+          minline = search;
+          minindent = indented;
+        }
+      }
+      return minline;
+    }
+    function getStateBefore(n) {
+      var start = findStartLine(n), state = start && lines[start-1].stateAfter;
+      if (!state) state = startState(mode);
+      else state = copyState(mode, state);
+      for (var i = start; i < n; ++i) {
+        var line = lines[i];
+        line.highlight(mode, state);
+        line.stateAfter = copyState(mode, state);
+      }
+      if (!lines[n].stateAfter) work.push(n);
+      return state;
+    }
+    function highlightWorker() {
+      var end = +new Date + options.workTime;
+      while (work.length) {
+        if (!lines[showingFrom].stateAfter) var task = showingFrom;
+        else var task = work.pop();
+        if (task >= lines.length) continue;
+        var start = findStartLine(task), state = start && lines[start-1].stateAfter;
+        if (state) state = copyState(mode, state);
+        else state = startState(mode);
+
+        for (var i = start, l = lines.length; i < l; ++i) {
+          var line = lines[i], hadState = line.stateAfter;
+          if (+new Date > end) {
+            work.push(i);
+            startWorker(options.workDelay);
+            changes.push({from: task, to: i});
+            return;
+          }
+          var changed = line.highlight(mode, state);
+          line.stateAfter = copyState(mode, state);
+          if (hadState && !changed && line.text) break;
+        }
+        changes.push({from: task, to: i});
+      }
+    }
+    function startWorker(time) {
+      if (!work.length) return;
+      highlight.set(time, operation(highlightWorker));
+    }
+
+    // Operations are used to wrap changes in such a way that each
+    // change won't have to update the cursor and display (which would
+    // be awkward, slow, and error-prone), but instead updates are
+    // batched and then all combined and executed at once.
+    function startOperation() {
+      updateInput = null; changes = []; textChanged = selectionChanged = false;
+    }
+    function endOperation() {
+      var reScroll = false;
+      if (selectionChanged) reScroll = !scrollCursorIntoView();
+      if (changes.length) updateDisplay(changes);
+      else if (selectionChanged) updateCursor();
+      if (reScroll) scrollCursorIntoView();
+      if (selectionChanged) restartBlink();
+
+      // updateInput can be set to a boolean value to force/prevent an
+      // update.
+      if (!leaveInputAlone && (updateInput === true || (updateInput !== false && selectionChanged)))
+        prepareInput();
+
+      if (selectionChanged && options.matchBrackets)
+        setTimeout(operation(function() {
+          if (bracketHighlighted) {bracketHighlighted(); bracketHighlighted = null;}
+          matchBrackets(false);
+        }), 20);
+      var tc = textChanged; // textChanged can be reset by cursoractivity callback
+      if (selectionChanged && options.onCursorActivity)
+        options.onCursorActivity(instance);
+      if (tc && options.onChange && instance)
+        options.onChange(instance, tc);
+    }
+    var nestedOperation = 0;
+    function operation(f) {
+      return function() {
+        if (!nestedOperation++) startOperation();
+        try {var result = f.apply(this, arguments);}
+        finally {if (!--nestedOperation) endOperation();}
+        return result;
+      };
+    }
+
+    function SearchCursor(query, pos, caseFold) {
+      this.atOccurrence = false;
+      if (caseFold == null) caseFold = typeof query == "string" && query == query.toLowerCase();
+
+      if (pos && typeof pos == "object") pos = clipPos(pos);
+      else pos = {line: 0, ch: 0};
+      this.pos = {from: pos, to: pos};
+
+      // The matches method is filled in based on the type of query.
+      // It takes a position and a direction, and returns an object
+      // describing the next occurrence of the query, or null if no
+      // more matches were found.
+      if (typeof query != "string") // Regexp match
+        this.matches = function(reverse, pos) {
+          if (reverse) {
+            var line = lines[pos.line].text.slice(0, pos.ch), match = line.match(query), start = 0;
+            while (match) {
+              var ind = line.indexOf(match[0]);
+              start += ind;
+              line = line.slice(ind + 1);
+              var newmatch = line.match(query);
+              if (newmatch) match = newmatch;
+              else break;
+            }
+          }
+          else {
+            var line = lines[pos.line].text.slice(pos.ch), match = line.match(query),
+                start = match && pos.ch + line.indexOf(match[0]);
+          }
+          if (match)
+            return {from: {line: pos.line, ch: start},
+                    to: {line: pos.line, ch: start + match[0].length},
+                    match: match};
+        };
+      else { // String query
+        if (caseFold) query = query.toLowerCase();
+        var fold = caseFold ? function(str){return str.toLowerCase();} : function(str){return str;};
+        var target = query.split("\n");
+        // Different methods for single-line and multi-line queries
+        if (target.length == 1)
+          this.matches = function(reverse, pos) {
+            var line = fold(lines[pos.line].text), len = query.length, match;
+            if (reverse ? (pos.ch >= len && (match = line.lastIndexOf(query, pos.ch - len)) != -1)
+                        : (match = line.indexOf(query, pos.ch)) != -1)
+              return {from: {line: pos.line, ch: match},
+                      to: {line: pos.line, ch: match + len}};
+          };
+        else
+          this.matches = function(reverse, pos) {
+            var ln = pos.line, idx = (reverse ? target.length - 1 : 0), match = target[idx], line = fold(lines[ln].text);
+            var offsetA = (reverse ? line.indexOf(match) + match.length : line.lastIndexOf(match));
+            if (reverse ? offsetA >= pos.ch || offsetA != match.length
+                        : offsetA <= pos.ch || offsetA != line.length - match.length)
+              return;
+            for (;;) {
+              if (reverse ? !ln : ln == lines.length - 1) return;
+              line = fold(lines[ln += reverse ? -1 : 1].text);
+              match = target[reverse ? --idx : ++idx];
+              if (idx > 0 && idx < target.length - 1) {
+                if (line != match) return;
+                else continue;
+              }
+              var offsetB = (reverse ? line.lastIndexOf(match) : line.indexOf(match) + match.length);
+              if (reverse ? offsetB != line.length - match.length : offsetB != match.length)
+                return;
+              var start = {line: pos.line, ch: offsetA}, end = {line: ln, ch: offsetB};
+              return {from: reverse ? end : start, to: reverse ? start : end};
+            }
+          };
+      }
+    }
+
+    SearchCursor.prototype = {
+      findNext: function() {return this.find(false);},
+      findPrevious: function() {return this.find(true);},
+
+      find: function(reverse) {
+        var self = this, pos = clipPos(reverse ? this.pos.from : this.pos.to);
+        function savePosAndFail(line) {
+          var pos = {line: line, ch: 0};
+          self.pos = {from: pos, to: pos};
+          self.atOccurrence = false;
+          return false;
+        }
+
+        for (;;) {
+          if (this.pos = this.matches(reverse, pos)) {
+            this.atOccurrence = true;
+            return this.pos.match || true;
+          }
+          if (reverse) {
+            if (!pos.line) return savePosAndFail(0);
+            pos = {line: pos.line-1, ch: lines[pos.line-1].text.length};
+          }
+          else {
+            if (pos.line == lines.length - 1) return savePosAndFail(lines.length);
+            pos = {line: pos.line+1, ch: 0};
+          }
+        }
+      },
+
+      from: function() {if (this.atOccurrence) return copyPos(this.pos.from);},
+      to: function() {if (this.atOccurrence) return copyPos(this.pos.to);}
+    };
+
+    return instance;
+  } // (end of function CodeMirror)
+
+  // The default configuration options.
+  CodeMirror.defaults = {
+    value: "",
+    mode: null,
+    indentUnit: 2,
+    indentWithTabs: false,
+    tabMode: "classic",
+    enterMode: "indent",
+    electricChars: true,
+    onKeyEvent: null,
+    lineNumbers: false,
+    gutter: false,
+    firstLineNumber: 1,
+    readOnly: false,
+    onChange: null,
+    onCursorActivity: null,
+    onGutterClick: null,
+    onFocus: null, onBlur: null, onScroll: null,
+    matchBrackets: false,
+    workTime: 100,
+    workDelay: 200,
+    undoDepth: 40,
+    tabindex: null,
+    document: window.document
+  };
+
+  // Known modes, by name and by MIME
+  var modes = {}, mimeModes = {};
+  CodeMirror.defineMode = function(name, mode) {
+    if (!CodeMirror.defaults.mode && name != "null") CodeMirror.defaults.mode = name;
+    modes[name] = mode;
+  };
+  CodeMirror.defineMIME = function(mime, spec) {
+    mimeModes[mime] = spec;
+  };
+  CodeMirror.getMode = function(options, spec) {
+    if (typeof spec == "string" && mimeModes.hasOwnProperty(spec))
+      spec = mimeModes[spec];
+    if (typeof spec == "string")
+      var mname = spec, config = {};
+    else
+      var mname = spec.name, config = spec;
+    var mfactory = modes[mname];
+    if (!mfactory) {
+      if (window.console) console.warn("No mode " + mname + " found, falling back to plain text.");
+      return CodeMirror.getMode(options, "text/plain");
+    }
+    return mfactory(options, config);
+  }
+  CodeMirror.listModes = function() {
+    var list = [];
+    for (var m in modes)
+      if (modes.propertyIsEnumerable(m)) list.push(m);
+    return list;
+  };
+  CodeMirror.listMIMEs = function() {
+    var list = [];
+    for (var m in mimeModes)
+      if (mimeModes.propertyIsEnumerable(m)) list.push(m);
+    return list;
+  };
+
+  CodeMirror.fromTextArea = function(textarea, options) {
+    if (!options) options = {};
+    options.value = textarea.value;
+    if (!options.tabindex && textarea.tabindex)
+      options.tabindex = textarea.tabindex;
+
+    function save() {textarea.value = instance.getValue();}
+    if (textarea.form) {
+      // Deplorable hack to make the submit method do the right thing.
+      var rmSubmit = connect(textarea.form, "submit", save, true);
+      if (typeof textarea.form.submit == "function") {
+        var realSubmit = textarea.form.submit;
+        function wrappedSubmit() {
+          save();
+          textarea.form.submit = realSubmit;
+          textarea.form.submit();
+          textarea.form.submit = wrappedSubmit;
+        }
+        textarea.form.submit = wrappedSubmit;
+      }
+    }
+
+    textarea.style.display = "none";
+    var instance = CodeMirror(function(node) {
+      textarea.parentNode.insertBefore(node, textarea.nextSibling);
+    }, options);
+    instance.save = save;
+    instance.toTextArea = function() {
+      save();
+      textarea.parentNode.removeChild(instance.getWrapperElement());
+      textarea.style.display = "";
+      if (textarea.form) {
+        rmSubmit();
+        if (typeof textarea.form.submit == "function")
+          textarea.form.submit = realSubmit;
+      }
+    };
+    return instance;
+  };
+
+  // Utility functions for working with state. Exported because modes
+  // sometimes need to do this.
+  function copyState(mode, state) {
+    if (state === true) return state;
+    if (mode.copyState) return mode.copyState(state);
+    var nstate = {};
+    for (var n in state) {
+      var val = state[n];
+      if (val instanceof Array) val = val.concat([]);
+      nstate[n] = val;
+    }
+    return nstate;
+  }
+  CodeMirror.startState = startState;
+  function startState(mode, a1, a2) {
+    return mode.startState ? mode.startState(a1, a2) : true;
+  }
+  CodeMirror.copyState = copyState;
+
+  // The character stream used by a mode's parser.
+  function StringStream(string) {
+    this.pos = this.start = 0;
+    this.string = string;
+  }
+  StringStream.prototype = {
+    eol: function() {return this.pos >= this.string.length;},
+    sol: function() {return this.pos == 0;},
+    peek: function() {return this.string.charAt(this.pos);},
+    next: function() {
+      if (this.pos < this.string.length)
+        return this.string.charAt(this.pos++);
+    },
+    eat: function(match) {
+      var ch = this.string.charAt(this.pos);
+      if (typeof match == "string") var ok = ch == match;
+      else var ok = ch && (match.test ? match.test(ch) : match(ch));
+      if (ok) {++this.pos; return ch;}
+    },
+    eatWhile: function(match) {
+      var start = this.start;
+      while (this.eat(match)){}
+      return this.pos > start;
+    },
+    eatSpace: function() {
+      var start = this.pos;
+      while (/[\s\u00a0]/.test(this.string.charAt(this.pos))) ++this.pos;
+      return this.pos > start;
+    },
+    skipToEnd: function() {this.pos = this.string.length;},
+    skipTo: function(ch) {
+      var found = this.string.indexOf(ch, this.pos);
+      if (found > -1) {this.pos = found; return true;}
+    },
+    backUp: function(n) {this.pos -= n;},
+    column: function() {return countColumn(this.string, this.start);},
+    indentation: function() {return countColumn(this.string);},
+    match: function(pattern, consume, caseInsensitive) {
+      if (typeof pattern == "string") {
+        function cased(str) {return caseInsensitive ? str.toLowerCase() : str;}
+        if (cased(this.string).indexOf(cased(pattern), this.pos) == this.pos) {
+          if (consume !== false) this.pos += pattern.length;
+          return true;
+        }
+      }
+      else {
+        var match = this.string.slice(this.pos).match(pattern);
+        if (match && consume !== false) this.pos += match[0].length;
+        return match;
+      }
+    },
+    current: function(){return this.string.slice(this.start, this.pos);}
+  };
+
+  // Line objects. These hold state related to a line, including
+  // highlighting info (the styles array).
+  function Line(text, styles) {
+    this.styles = styles || [text, null];
+    this.stateAfter = null;
+    this.text = text;
+    this.marked = this.gutterMarker = this.className = null;
+  }
+  Line.prototype = {
+    // Replace a piece of a line, keeping the styles around it intact.
+    replace: function(from, to, text) {
+      var st = [], mk = this.marked;
+      copyStyles(0, from, this.styles, st);
+      if (text) st.push(text, null);
+      copyStyles(to, this.text.length, this.styles, st);
+      this.styles = st;
+      this.text = this.text.slice(0, from) + text + this.text.slice(to);
+      this.stateAfter = null;
+      if (mk) {
+        var diff = text.length - (to - from), end = this.text.length;
+        function fix(n) {return n <= Math.min(to, to + diff) ? n : n + diff;}
+        for (var i = 0; i < mk.length; ++i) {
+          var mark = mk[i], del = false;
+          if (mark.from >= end) del = true;
+          else {mark.from = fix(mark.from); if (mark.to != null) mark.to = fix(mark.to);}
+          if (del || mark.from >= mark.to) {mk.splice(i, 1); i--;}
+        }
+      }
+    },
+    // Split a line in two, again keeping styles intact.
+    split: function(pos, textBefore) {
+      var st = [textBefore, null];
+      copyStyles(pos, this.text.length, this.styles, st);
+      return new Line(textBefore + this.text.slice(pos), st);
+    },
+    addMark: function(from, to, style) {
+      var mk = this.marked, mark = {from: from, to: to, style: style};
+      if (this.marked == null) this.marked = [];
+      this.marked.push(mark);
+      this.marked.sort(function(a, b){return a.from - b.from;});
+      return mark;
+    },
+    removeMark: function(mark) {
+      var mk = this.marked;
+      if (!mk) return;
+      for (var i = 0; i < mk.length; ++i)
+        if (mk[i] == mark) {mk.splice(i, 1); break;}
+    },
+    // Run the given mode's parser over a line, update the styles
+    // array, which contains alternating fragments of text and CSS
+    // classes.
+    highlight: function(mode, state) {
+      var stream = new StringStream(this.text), st = this.styles, pos = 0;
+      var changed = false, curWord = st[0], prevWord;
+      while (!stream.eol()) {
+        var style = mode.token(stream, state);
+        var substr = this.text.slice(stream.start, stream.pos);
+        stream.start = stream.pos;
+        if (pos && st[pos-1] == style)
+          st[pos-2] += substr;
+        else if (substr) {
+          if (!changed && (st[pos+1] != style || (pos && st[pos-2] != prevWord))) changed = true;
+          st[pos++] = substr; st[pos++] = style;
+          prevWord = curWord; curWord = st[pos];
+        }
+        // Give up when line is ridiculously long
+        if (stream.pos > 5000) {
+          st[pos++] = this.text.slice(stream.pos); st[pos++] = null;
+          break;
+        }
+      }
+      if (st.length != pos) {st.length = pos; changed = true;}
+      if (pos && st[pos-2] != prevWord) changed = true;
+      return changed;
+    },
+    // Fetch the parser token for a given character. Useful for hacks
+    // that want to inspect the mode state (say, for completion).
+    getTokenAt: function(mode, state, ch) {
+      var txt = this.text, stream = new StringStream(txt);
+      while (stream.pos < ch && !stream.eol()) {
+        stream.start = stream.pos;
+        var style = mode.token(stream, state);
+      }
+      return {start: stream.start,
+              end: stream.pos,
+              string: stream.current(),
+              className: style || null,
+              state: state};
+    },
+    indentation: function() {return countColumn(this.text);},
+    // Produces an HTML fragment for the line, taking selection,
+    // marking, and highlighting into account.
+    getHTML: function(sfrom, sto, includePre, endAt) {
+      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>");
+        else html.push(htmlEscape(text));
+      }
+      var st = this.styles, allText = this.text, marked = this.marked;
+      if (sfrom == sto) sfrom = null;
+      var len = allText.length;
+      if (endAt != null) len = Math.min(endAt, len);
+
+      if (!allText && endAt == null)
+        span(" ", sfrom != null && sto == null ? "CodeMirror-selected" : null);
+      else if (!marked && sfrom == null)
+        for (var i = 0, ch = 0; ch < len; i+=2) {
+          var str = st[i], l = str.length;
+          if (ch + l > len) str = str.slice(0, len - ch);
+          ch += l;
+          span(str, st[i+1]);
+        }
+      else {
+        var pos = 0, i = 0, text = "", style, sg = 0;
+        var markpos = -1, mark = null;
+        function nextMark() {
+          if (marked) {
+            markpos += 1;
+            mark = (markpos < marked.length) ? marked[markpos] : null;
+          }
+        }
+        nextMark();
+        while (pos < len) {
+          var upto = len;
+          var extraStyle = "";
+          if (sfrom != null) {
+            if (sfrom > pos) upto = sfrom;
+            else if (sto == null || sto > pos) {
+              extraStyle = " CodeMirror-selected";
+              if (sto != null) upto = Math.min(upto, sto);
+            }
+          }
+          while (mark && mark.to != null && mark.to <= pos) nextMark();
+          if (mark) {
+            if (mark.from > pos) upto = Math.min(upto, mark.from);
+            else {
+              extraStyle += " " + mark.style;
+              if (mark.to != null) upto = Math.min(upto, mark.to);
+            }
+          }
+          for (;;) {
+            var end = pos + text.length;
+            var apliedStyle = style;
+            if (extraStyle) apliedStyle = style ? style + extraStyle : extraStyle;
+            span(end > upto ? text.slice(0, upto - pos) : text, apliedStyle);
+            if (end >= upto) {text = text.slice(upto - pos); pos = upto; break;}
+            pos = end;
+            text = st[i++]; style = st[i++];
+          }
+        }
+        if (sfrom != null && sto == null) span(" ", "CodeMirror-selected");
+      }
+      if (includePre) html.push("</pre>");
+      return html.join("");
+    }
+  };
+  // Utility used by replace and split above
+  function copyStyles(from, to, source, dest) {
+    for (var i = 0, pos = 0, state = 0; pos < to; i+=2) {
+      var part = source[i], end = pos + part.length;
+      if (state == 0) {
+        if (end > from) dest.push(part.slice(from - pos, Math.min(part.length, to - pos)), source[i+1]);
+        if (end >= from) state = 1;
+      }
+      else if (state == 1) {
+        if (end > to) dest.push(part.slice(0, to - pos), source[i+1]);
+        else dest.push(part, source[i+1]);
+      }
+      pos = end;
+    }
+  }
+
+  // The history object 'chunks' changes that are made close together
+  // and at almost the same time into bigger undoable units.
+  function History() {
+    this.time = 0;
+    this.done = []; this.undone = [];
+  }
+  History.prototype = {
+    addChange: function(start, added, old) {
+      this.undone.length = 0;
+      var time = +new Date, last = this.done[this.done.length - 1];
+      if (time - this.time > 400 || !last ||
+          last.start > start + added || last.start + last.added < start - last.added + last.old.length)
+        this.done.push({start: start, added: added, old: old});
+      else {
+        var oldoff = 0;
+        if (start < last.start) {
+          for (var i = last.start - start - 1; i >= 0; --i)
+            last.old.unshift(old[i]);
+          last.added += last.start - start;
+          last.start = start;
+        }
+        else if (last.start < start) {
+          oldoff = start - last.start;
+          added += oldoff;
+        }
+        for (var i = last.added - oldoff, e = old.length; i < e; ++i)
+          last.old.push(old[i]);
+        if (last.added < added) last.added = added;
+      }
+      this.time = time;
+    }
+  };
+
+  // Event stopping compatibility wrapper.
+  function stopEvent() {
+    if (this.preventDefault) {this.preventDefault(); this.stopPropagation();}
+    else {this.returnValue = false; this.cancelBubble = true;}
+  }
+  // Ensure an event has a stop method.
+  function addStop(event) {
+    if (!event.stop) event.stop = stopEvent;
+    return event;
+  }
+
+  // Event wrapper, exposing the few operations we need.
+  function Event(orig) {this.e = orig;}
+  Event.prototype = {
+    stop: function() {stopEvent.call(this.e);},
+    target: function() {return this.e.target || this.e.srcElement;},
+    button: function() {
+      if (this.e.which) return this.e.which;
+      else if (this.e.button & 1) return 1;
+      else if (this.e.button & 2) return 3;
+      else if (this.e.button & 4) return 2;
+    },
+    pageX: function() {
+      if (this.e.pageX != null) return this.e.pageX;
+      var doc = this.target().ownerDocument;
+      return this.e.clientX + doc.body.scrollLeft + doc.documentElement.scrollLeft;
+    },
+    pageY: function() {
+      if (this.e.pageY != null) return this.e.pageY;
+      var doc = this.target().ownerDocument;
+      return this.e.clientY + doc.body.scrollTop + doc.documentElement.scrollTop;
+    }
+  };
+
+  // Event handler registration. If disconnect is true, it'll return a
+  // function that unregisters the handler.
+  function connect(node, type, handler, disconnect) {
+    function wrapHandler(event) {handler(new Event(event || window.event));}
+    if (typeof node.addEventListener == "function") {
+      node.addEventListener(type, wrapHandler, false);
+      if (disconnect) return function() {node.removeEventListener(type, wrapHandler, false);};
+    }
+    else {
+      node.attachEvent("on" + type, wrapHandler);
+      if (disconnect) return function() {node.detachEvent("on" + type, wrapHandler);};
+    }
+  }
+
+  function Delayed() {this.id = null;}
+  Delayed.prototype = {set: function(ms, f) {clearTimeout(this.id); this.id = setTimeout(f, ms);}};
+
+  // Some IE versions don't preserve whitespace when setting the
+  // innerHTML of a PRE tag.
+  var badInnerHTML = (function() {
+    var pre = document.createElement("pre");
+    pre.innerHTML = " "; return !pre.innerHTML;
+  })();
+
+  var gecko = /gecko\/\d{7}/i.test(navigator.userAgent);
+
+  var lineSep = "\n";
+  // Feature-detect whether newlines in textareas are converted to \r\n
+  (function () {
+    var te = document.createElement("textarea");
+    te.value = "foo\nbar";
+    if (te.value.indexOf("\r") > -1) lineSep = "\r\n";
+  }());
+
+  var tabSize = 8;
+  var mac = /Mac/.test(navigator.platform);
+  var movementKeys = {};
+  for (var i = 35; i <= 40; ++i)
+    movementKeys[i] = movementKeys["c" + i] = true;
+
+  // Counts the column offset in a string, taking tabs into account.
+  // Used mostly to find indentation.
+  function countColumn(string, end) {
+    if (end == null) {
+      end = string.search(/[^\s\u00a0]/);
+      if (end == -1) end = string.length;
+    }
+    for (var i = 0, n = 0; i < end; ++i) {
+      if (string.charAt(i) == "\t") n += tabSize - (n % tabSize);
+      else ++n;
+    }
+    return n;
+  }
+
+  // Find the position of an element by following the offsetParent chain.
+  function eltOffset(node) {
+    var x = 0, y = 0;
+    for (var n = node; n; n = n.offsetParent) {x += n.offsetLeft; y += n.offsetTop;}
+    for (var n = node.parentNode; n != node.ownerDocument.body; n = n.parentNode) {x -= n.scrollLeft; y -= n.scrollTop;}
+    return {left: x, top: y};
+  }
+  // Get a node's text content.
+  function eltText(node) {
+    return node.textContent || node.innerText || node.nodeValue || "";
+  }
+
+  // Operations on {line, ch} objects.
+  function posEq(a, b) {return a.line == b.line && a.ch == b.ch;}
+  function posLess(a, b) {return a.line < b.line || (a.line == b.line && a.ch < b.ch);}
+  function copyPos(x) {return {line: x.line, ch: x.ch};}
+
+  function htmlEscape(str) {
+    return str.replace(/[<>&]/g, function(str) {
+      return str == "&" ? "&amp;" : str == "<" ? "&lt;" : "&gt;";
+    });
+  }
+
+  // Used to position the cursor after an undo/redo by finding the
+  // last edited character.
+  function editEnd(from, to) {
+    if (!to) return from ? from.length : 0;
+    if (!from) return to.length;
+    for (var i = from.length, j = to.length; i >= 0 && j >= 0; --i, --j)
+      if (from.charAt(i) != to.charAt(j)) break;
+    return j + 1;
+  }
+
+  function indexOf(collection, elt) {
+    if (collection.indexOf) return collection.indexOf(elt);
+    for (var i = 0, e = collection.length; i < e; ++i)
+      if (collection[i] == elt) return i;
+    return -1;
+  }
+
+  // See if "".split is the broken IE version, if so, provide an
+  // alternative way to split lines.
+  if ("\n\nb".split(/\n/).length != 3)
+    var splitLines = function(string) {
+      var pos = 0, nl, result = [];
+      while ((nl = string.indexOf("\n", pos)) > -1) {
+        result.push(string.slice(pos, string.charAt(nl-1) == "\r" ? nl - 1 : nl));
+        pos = nl + 1;
+      }
+      result.push(string.slice(pos));
+      return result;
+    };
+  else
+    var splitLines = function(string){return string.split(/\r?\n/);};
+
+  // Sane model of finding and setting the selection in a textarea
+  if (window.getSelection) {
+    var selRange = function(te) {
+      try {return {start: te.selectionStart, end: te.selectionEnd};}
+      catch(e) {return null;}
+    };
+    var setSelRange = function(te, start, end) {
+      try {te.setSelectionRange(start, end);}
+      catch(e) {} // Fails on Firefox when textarea isn't part of the document
+    };
+  }
+  // IE model. Don't ask.
+  else {
+    var selRange = function(te) {
+      try {var range = te.ownerDocument.selection.createRange();}
+      catch(e) {return null;}
+      if (!range || range.parentElement() != te) return null;
+      var val = te.value, len = val.length, localRange = te.createTextRange();
+      localRange.moveToBookmark(range.getBookmark());
+      var endRange = te.createTextRange();
+      endRange.collapse(false);
+
+      if (localRange.compareEndPoints("StartToEnd", endRange) > -1)
+        return {start: len, end: len};
+
+      var start = -localRange.moveStart("character", -len);
+      for (var i = val.indexOf("\r"); i > -1 && i < start; i = val.indexOf("\r", i+1), start++) {}
+
+      if (localRange.compareEndPoints("EndToEnd", endRange) > -1)
+        return {start: start, end: len};
+
+      var end = -localRange.moveEnd("character", -len);
+      for (var i = val.indexOf("\r"); i > -1 && i < end; i = val.indexOf("\r", i+1), end++) {}
+      return {start: start, end: end};
+    };
+    var setSelRange = function(te, start, end) {
+      var range = te.createTextRange();
+      range.collapse(true);
+      var endrange = range.duplicate();
+      var newlines = 0, txt = te.value;
+      for (var pos = txt.indexOf("\n"); pos > -1 && pos < start; pos = txt.indexOf("\n", pos + 1))
+        ++newlines;
+      range.move("character", start - newlines);
+      for (; pos > -1 && pos < end; pos = txt.indexOf("\n", pos + 1))
+        ++newlines;
+      endrange.move("character", end - newlines);
+      range.setEndPoint("EndToEnd", endrange);
+      range.select();
+    };
+  }
+
+  CodeMirror.defineMode("null", function() {
+    return {token: function(stream) {stream.skipToEnd();}};
+  });
+  CodeMirror.defineMIME("text/plain", "null");
+
+  return CodeMirror;
+})();

IPython/frontend/html/notebook/static/codemirror2/lib/overlay.js

@@ -0,0 +1,51 b''
+// Utility function that allows modes to be combined. The mode given
+// as the base argument takes care of most of the normal mode
+// functionality, but a second (typically simple) mode is used, which
+// can override the style of text. Both modes get to parse all of the
+// text, but when both assign a non-null style to a piece of code, the
+// overlay wins, unless the combine argument was true, in which case
+// the styles are combined.
+
+CodeMirror.overlayParser = function(base, overlay, combine) {
+  return {
+    startState: function() {
+      return {
+        base: CodeMirror.startState(base),
+        overlay: CodeMirror.startState(overlay),
+        basePos: 0, baseCur: null,
+        overlayPos: 0, overlayCur: null
+      };
+    },
+    copyState: function(state) {
+      return {
+        base: CodeMirror.copyState(base, state.base),
+        overlay: CodeMirror.copyState(overlay, state.overlay),
+        basePos: state.basePos, baseCur: null,
+        overlayPos: state.overlayPos, overlayCur: null
+      };
+    },
+
+    token: function(stream, state) {
+      if (stream.start == state.basePos) {
+        state.baseCur = base.token(stream, state.base);
+        state.basePos = stream.pos;
+      }
+      if (stream.start == state.overlayPos) {
+        stream.pos = stream.start;
+        state.overlayCur = overlay.token(stream, state.overlay);
+        state.overlayPos = stream.pos;
+      }
+      stream.pos = Math.min(state.basePos, state.overlayPos);
+      if (stream.eol()) state.basePos = state.overlayPos = 0;
+
+      if (state.overlayCur == null) return state.baseCur;
+      if (state.baseCur != null && combine) return state.baseCur + " " + state.overlayCur;
+      else return state.overlayCur;
+    },
+    
+    indent: function(state, textAfter) {
+      return base.indent(state.base, textAfter);
+    },
+    electricChars: base.electricChars
+  };
+};

IPython/frontend/html/notebook/static/codemirror2/mode/htmlmixed/htmlmixed.js

@@ -0,0 +1,74 b''
+CodeMirror.defineMode("htmlmixed", function(config, parserConfig) {
+  var htmlMode = CodeMirror.getMode(config, {name: "xml", htmlMode: true});
+  var jsMode = CodeMirror.getMode(config, "javascript");
+  var cssMode = CodeMirror.getMode(config, "css");
+
+  function html(stream, state) {
+    var style = htmlMode.token(stream, state.htmlState);
+    if (style == "xml-tag" && stream.current() == ">" && state.htmlState.context) {
+      if (/^script$/i.test(state.htmlState.context.tagName)) {
+        state.token = javascript;
+        state.localState = jsMode.startState(htmlMode.indent(state.htmlState, ""));
+      }
+      else if (/^style$/i.test(state.htmlState.context.tagName)) {
+        state.token = css;
+        state.localState = cssMode.startState(htmlMode.indent(state.htmlState, ""));
+      }
+    }
+    return style;
+  }
+  function maybeBackup(stream, pat, style) {
+    var cur = stream.current();
+    var close = cur.search(pat);
+    if (close > -1) stream.backUp(cur.length - close);
+    return style;
+  }
+  function javascript(stream, state) {
+    if (stream.match(/^<\/\s*script\s*>/i, false)) {
+      state.token = html;
+      state.curState = null;
+      return html(stream, state);
+    }
+    return maybeBackup(stream, /<\/\s*script\s*>/,
+                       jsMode.token(stream, state.localState));
+  }
+  function css(stream, state) {
+    if (stream.match(/^<\/\s*style\s*>/i, false)) {
+      state.token = html;
+      state.localState = null;
+      return html(stream, state);
+    }
+    return maybeBackup(stream, /<\/\s*style\s*>/,
+                       cssMode.token(stream, state.localState));
+  }
+
+  return {
+    startState: function() {
+      var state = htmlMode.startState();
+      return {token: html, localState: null, htmlState: state};
+    },
+
+    copyState: function(state) {
+      if (state.localState)
+        var local = CodeMirror.copyState(state.token == css ? cssMode : jsMode, state.localState);
+      return {token: state.token, localState: local, htmlState: CodeMirror.copyState(htmlMode, state.htmlState)};
+    },
+
+    token: function(stream, state) {
+      return state.token(stream, state);
+    },
+
+    indent: function(state, textAfter) {
+      if (state.token == html || /^\s*<\//.test(textAfter))
+        return htmlMode.indent(state.htmlState, textAfter);
+      else if (state.token == javascript)
+        return jsMode.indent(state.localState, textAfter);
+      else
+        return cssMode.indent(state.localState, textAfter);
+    },
+
+    electricChars: "/{}:"
+  }
+});
+
+CodeMirror.defineMIME("text/html", "htmlmixed");

IPython/frontend/html/notebook/static/codemirror2/mode/htmlmixed/index.html

@@ -0,0 +1,54 b''
+<!doctype html>
+<html>
+  <head>
+    <title>CodeMirror 2: HTML mixed mode</title>
+    <link rel="stylesheet" href="../../lib/codemirror.css">
+    <script src="../../lib/codemirror.js"></script>
+    <script src="../xml/xml.js"></script>
+    <link rel="stylesheet" href="../xml/xml.css">
+    <script src="../javascript/javascript.js"></script>
+    <link rel="stylesheet" href="../javascript/javascript.css">
+    <script src="../css/css.js"></script>
+    <link rel="stylesheet" href="../css/css.css">
+    <script src="htmlmixed.js"></script>
+    <link rel="stylesheet" href="../../css/docs.css">
+    <style>.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
+  </head>
+  <body>
+    <h1>CodeMirror 2: HTML mixed mode</h1>
+    <form><textarea id="code" name="code">
+<html style="color: green">
+  <!-- this is a comment -->
+  <head>
+    <title>Mixed HTML Example</title>
+    <style type="text/css">
+      h1 {font-family: comic sans; color: #f0f;}
+      div {background: yellow !important;}
+      body {
+        max-width: 50em;
+        margin: 1em 2em 1em 5em;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Mixed HTML Example</h1>
+    <script>
+      function jsFunc(arg1, arg2) {
+        if (arg1 && arg2) document.body.innerHTML = "achoo";
+      }
+    </script>
+  </body>
+</html>
+</textarea></form>
+    <script>
+      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "text/html", tabMode: "indent"});
+    </script>
+
+    <p>The HTML mixed mode depends on the XML, JavaScript, and CSS modes.</p>
+
+    <p><strong>MIME types defined:</strong> <code>text/html</code>
+    (redefined, only takes effect if you load this parser after the
+    XML parser).</p>
+
+  </body>
+</html>

IPython/frontend/html/notebook/static/codemirror2/mode/python/LICENSE.txt

@@ -0,0 +1,21 b''
+The MIT License
+
+Copyright (c) 2010 Timothy Farrell
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
  No newline at end of file

IPython/frontend/html/notebook/static/codemirror2/mode/python/index.html

@@ -0,0 +1,123 b''
+<!doctype html>
+<html>
+  <head>
+    <title>CodeMirror 2: Python mode</title>
+    <link rel="stylesheet" href="../../lib/codemirror.css">
+    <script src="../../lib/codemirror.js"></script>
+    <script src="python.js"></script>
+    <link rel="stylesheet" href="python.css">
+	<link rel="stylesheet" href="../../css/docs.css">
+    <style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
+  </head>
+  <body>
+    <h1>CodeMirror 2: Python mode</h1>
+    
+    <div><textarea id="code" name="code">
+# Literals
+1234
+0.0e101
+.123
+0b01010011100
+0o01234567
+0x0987654321abcdef
+7
[phone]
+3L
+79228162514264337593543950336L
+0x100000000L
+79228162514264337593543950336
+0xdeadbeef
+3.14j
+10.j
+10j
+.001j
+1e100j
+3.14e-10j
+
+
+# String Literals
+'For\''
+"God\""
+"""so loved
+the world"""
+'''that he gave
+his only begotten\' '''
+'that whosoever believeth \
+in him'
+''
+
+# Identifiers
+__a__
+a.b
+a.b.c
+
+# Operators
++ - * / % & | ^ ~ < >
+== != <= >= <> << >> // **
+and or not in is
+
+# Delimiters
+() [] {} , : ` = ; @ .  # Note that @ and . require the proper context.
++= -= *= /= %= &= |= ^=
+//= >>= <<= **=
+
+# Keywords
+as assert break class continue def del elif else except
+finally for from global if import lambda pass raise
+return try while with yield
+
+# Python 2 Keywords (otherwise Identifiers)
+exec print
+
+# Python 3 Keywords (otherwise Identifiers)
+nonlocal
+
+# Types
+bool classmethod complex dict enumerate float frozenset int list object
+property reversed set slice staticmethod str super tuple type
+
+# Python 2 Types (otherwise Identifiers)
+basestring buffer file long unicode xrange
+
+# Python 3 Types (otherwise Identifiers)
+bytearray bytes filter map memoryview open range zip
+
+# Some Example code
+import os
+from package import ParentClass
+
+@nonsenseDecorator
+def doesNothing():
+    pass
+
+class ExampleClass(ParentClass):
+    @staticmethod
+    def example(inputStr):
+        a = list(inputStr)
+        a.reverse()
+        return ''.join(a)
+
+    def __init__(self, mixin = 'Hello'):
+        self.mixin = mixin
+
+</textarea></div>
+    <script>
+      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+        mode: {name: "python",
+               version: 2,
+               singleLineStringErrors: false},
+        lineNumbers: true,
+        indentUnit: 4,
+        tabMode: "shift",
+        matchBrackets: true
+      });
+    </script>
+    <h2>Configuration Options:</h2>
+    <ul>
+      <li>version - 2/3 - The version of Python to recognize.  Default is 2.</li>
+      <li>singleLineStringErrors - true/false - If you have a single-line string that is not terminated at the end of the line, this will show subsequent lines as errors if true, otherwise it will consider the newline as the end of the string. Default is false.</li>
+    </ul>
+
+    <p><strong>MIME types defined:</strong> <code>text/x-python</code>.</p>
+  </body>
+</html>

IPython/frontend/html/notebook/static/codemirror2/mode/python/python.css

@@ -0,0 +1,23 b''
+span.py-delimiter,
+span.py-special {color: #666666;}
+
+span.py-operator {color: #AA22FF; font-weight: bold;}
+
+span.py-error {background-color: #000000; color: #FF0000;}
+
+span.py-keyword {color: #008000; font-weight: bold;}
+
+span.py-number {color: #666666;}
+
+span.py-identifier,
+span.py-func {color: #000000;}
+
+span.py-type {color: #008000;}
+span.py-decorator {color: #AA22FF;}
+
+span.py-comment {color: #408080; font-style: italic;}
+
+span.py-string,
+span.py-bytes,
+span.py-raw,
+span.py-unicode {color: #BA2121;}
  No newline at end of file

IPython/frontend/html/notebook/static/codemirror2/mode/python/python.js

@@ -0,0 +1,318 b''
+CodeMirror.defineMode("python", function(conf) {
+    var ERRORCLASS = 'py-error';
+    
+    function wordRegexp(words) {
+        return new RegExp("^((" + words.join(")|(") + "))\\b");
+    }
+    
+    var singleOperators = new RegExp("^[\\+\\-\\*/%&|\\^~<>!]");
+    var singleDelimiters = new RegExp('^[\\(\\)\\[\\]\\{\\}@,:`=;\\.]');
+    var doubleOperators = new RegExp("^((==)|(!=)|(<=)|(>=)|(<>)|(<<)|(>>)|(//)|(\\*\\*))");
+    var doubleDelimiters = new RegExp("^((\\+=)|(\\-=)|(\\*=)|(%=)|(/=)|(&=)|(\\|=)|(\\^=))");
+    var tripleDelimiters = new RegExp("^((//=)|(>>=)|(<<=)|(\\*\\*=))");
+    var identifiers = new RegExp("^[_A-Za-z][_A-Za-z0-9]*");
+
+    var wordOperators = wordRegexp(['and', 'or', 'not', 'is', 'in']);
+    var commonkeywords = ['as', 'assert', 'break', 'class', 'continue',
+                          'def', 'del', 'elif', 'else', 'except', 'finally',
+                          'for', 'from', 'global', 'if', 'import',
+                          'lambda', 'pass', 'raise', 'return',
+                          'try', 'while', 'with', 'yield'];
+    var commontypes = ['bool', 'classmethod', 'complex', 'dict', 'enumerate',
+                       'float', 'frozenset', 'int', 'list', 'object',
+                       'property', 'reversed', 'set', 'slice', 'staticmethod',
+                       'str', 'super', 'tuple', 'type'];
+    var py2 = {'types': ['basestring', 'buffer', 'file', 'long', 'unicode',
+                         'xrange'],
+               'keywords': ['exec', 'print']};
+    var py3 = {'types': ['bytearray', 'bytes', 'filter', 'map', 'memoryview',
+                         'open', 'range', 'zip'],
+               'keywords': ['nonlocal']};
+
+    if (!!conf.mode.version && parseInt(conf.mode.version, 10) === 3) {
+        commonkeywords = commonkeywords.concat(py3.keywords);
+        commontypes = commontypes.concat(py3.types);
+        var stringPrefixes = new RegExp("^(([rb]|(br))?('{3}|\"{3}|['\"]))", "i");
+    } else {
+        commonkeywords = commonkeywords.concat(py2.keywords);
+        commontypes = commontypes.concat(py2.types);
+        var stringPrefixes = new RegExp("^(([rub]|(ur)|(br))?('{3}|\"{3}|['\"]))", "i");
+    }
+    var keywords = wordRegexp(commonkeywords);
+    var types = wordRegexp(commontypes);
+
+    // tokenizers
+    function tokenBase(stream, state) {
+        // Handle scope changes
+        if (stream.sol()) {
+            var scopeOffset = state.scopes[0].offset;
+            if (stream.eatSpace()) {
+                var lineOffset = stream.indentation();
+                if (lineOffset > scopeOffset) {
+                    return 'py-indent';
+                } else if (lineOffset < scopeOffset) {
+                    return 'py-dedent';
+                }
+                return 'whitespace';
+            } else {
+                if (scopeOffset > 0) {
+                    dedent(stream, state);
+                }
+            }
+        }
+        if (stream.eatSpace()) {
+            return 'py-space';
+        }
+        
+        var ch = stream.peek();
+        
+        // Handle Comments
+        if (ch === '#') {
+            stream.skipToEnd();
+            return 'py-comment';
+        }
+        
+        // Handle Number Literals
+        if (stream.match(/^[0-9\.]/, false)) {
+            var floatLiteral = false;
+            // Floats
+            if (stream.match(/^\d*\.\d+(e[\+\-]?\d+)?/i)) { floatLiteral = true; }
+            if (stream.match(/^\d+\.\d*/)) { floatLiteral = true; }
+            if (stream.match(/^\.\d+/)) { floatLiteral = true; }
+            if (floatLiteral) {
+                // Float literals may be "imaginary"
+                stream.eat(/J/i);
+                return 'py-literal';
+            }
+            // Integers
+            var intLiteral = false;
+            // Hex
+            if (stream.match(/^0x[0-9a-f]+/i)) { intLiteral = true; }
+            // Binary
+            if (stream.match(/^0b[01]+/i)) { intLiteral = true; }
+            // Octal
+            if (stream.match(/^0o[0-7]+/i)) { intLiteral = true; }
+            // Decimal
+            if (stream.match(/^[1-9]\d*(e[\+\-]?\d+)?/)) {
+                // Decimal literals may be "imaginary"
+                stream.eat(/J/i);
+                // TODO - Can you have imaginary longs?
+                intLiteral = true;
+            }
+            // Zero by itself with no other piece of number.
+            if (stream.match(/^0(?![\dx])/i)) { intLiteral = true; }
+            if (intLiteral) {
+                // Integer literals may be "long"
+                stream.eat(/L/i);
+                return 'py-literal';
+            }
+        }
+        
+        // Handle Strings
+        if (stream.match(stringPrefixes)) {
+            state.tokenize = tokenStringFactory(stream.current());
+            return state.tokenize(stream, state);
+        }
+        
+        // Handle operators and Delimiters
+        if (stream.match(tripleDelimiters) || stream.match(doubleDelimiters)) {
+            return 'py-delimiter';
+        }
+        if (stream.match(doubleOperators)
+            || stream.match(singleOperators)
+            || stream.match(wordOperators)) {
+            return 'py-operator';
+        }
+        if (stream.match(singleDelimiters)) {
+            return 'py-delimiter';
+        }
+        
+        if (stream.match(types)) {
+            return 'py-type';
+        }
+        
+        if (stream.match(keywords)) {
+            return 'py-keyword';
+        }
+        
+        if (stream.match(identifiers)) {
+            return 'py-identifier';
+        }
+        
+        // Handle non-detected items
+        stream.next();
+        return ERRORCLASS;
+    }
+    
+    function tokenStringFactory(delimiter) {
+        while ('rub'.indexOf(delimiter[0].toLowerCase()) >= 0) {
+            delimiter = delimiter.substr(1);
+        }
+        var delim_re = new RegExp(delimiter);
+        var singleline = delimiter.length == 1;
+        var OUTCLASS = 'py-string';
+        
+        return function tokenString(stream, state) {
+            while (!stream.eol()) {
+                stream.eatWhile(/[^'"\\]/);
+                if (stream.eat('\\')) {
+                    stream.next();
+                    if (singleline && stream.eol()) {
+                        return OUTCLASS;
+                    }
+                } else if (stream.match(delim_re)) {
+                    state.tokenize = tokenBase;
+                    return OUTCLASS;
+                } else {
+                    stream.eat(/['"]/);
+                }
+            }
+            if (singleline) {
+                if (conf.mode.singleLineStringErrors) {
+                    OUTCLASS = ERRORCLASS
+                } else {
+                    state.tokenize = tokenBase;
+                }
+            }
+            return OUTCLASS;
+        };
+    }
+    
+    function indent(stream, state, type) {
+        type = type || 'py';
+        var indentUnit = 0;
+        if (type === 'py') {
+            for (var i = 0; i < state.scopes.length; ++i) {
+                if (state.scopes[i].type === 'py') {
+                    indentUnit = state.scopes[i].offset + conf.indentUnit;
+                    break;
+                }
+            }
+        } else {
+            indentUnit = stream.column() + stream.current().length;
+        }
+        state.scopes.unshift({
+            offset: indentUnit,
+            type: type
+        });
+    }
+    
+    function dedent(stream, state) {
+        if (state.scopes.length == 1) return;
+        if (state.scopes[0].type === 'py') {
+            var _indent = stream.indentation();
+            var _indent_index = -1;
+            for (var i = 0; i < state.scopes.length; ++i) {
+                if (_indent === state.scopes[i].offset) {
+                    _indent_index = i;
+                    break;
+                }
+            }
+            if (_indent_index === -1) {
+                return true;
+            }
+            while (state.scopes[0].offset !== _indent) {
+                state.scopes.shift();
+            }
+            return false
+        } else {
+            state.scopes.shift();
+            return false;
+        }
+    }
+
+    function tokenLexer(stream, state) {
+        var style = state.tokenize(stream, state);
+        var current = stream.current();
+
+        // Handle '.' connected identifiers
+        if (current === '.') {
+            style = state.tokenize(stream, state);
+            current = stream.current();
+            if (style === 'py-identifier') {
+                return 'py-identifier';
+            } else {
+                return ERRORCLASS;
+            }
+        }
+        
+        // Handle decorators
+        if (current === '@') {
+            style = state.tokenize(stream, state);
+            current = stream.current();
+            if (style === 'py-identifier'
+                || current === '@staticmethod'
+                || current === '@classmethod') {
+                return 'py-decorator';
+            } else {
+                return ERRORCLASS;
+            }
+        }
+        
+        // Handle scope changes.
+        if (current === 'pass' || current === 'return') {
+            state.dedent += 1;
+        }
+        if ((current === ':' && !state.lambda && state.scopes[0].type == 'py')
+            || style === 'py-indent') {
+            indent(stream, state);
+        }
+        var delimiter_index = '[({'.indexOf(current);
+        if (delimiter_index !== -1) {
+            indent(stream, state, '])}'.slice(delimiter_index, delimiter_index+1));
+        }
+        if (style === 'py-dedent') {
+            if (dedent(stream, state)) {
+                return ERRORCLASS;
+            }
+        }
+        delimiter_index = '])}'.indexOf(current);
+        if (delimiter_index !== -1) {
+            if (dedent(stream, state)) {
+                return ERRORCLASS;
+            }
+        }
+        if (state.dedent > 0 && stream.eol() && state.scopes[0].type == 'py') {
+            if (state.scopes.length > 1) state.scopes.shift();
+            state.dedent -= 1;
+        }
+        
+        return style;
+    }
+
+    var external = {
+        startState: function(basecolumn) {
+            return {
+              tokenize: tokenBase,
+              scopes: [{offset:basecolumn || 0, type:'py'}],
+              lastToken: null,
+              lambda: false,
+              dedent: 0
+          };
+        },
+        
+        token: function(stream, state) {
+            var style = tokenLexer(stream, state);
+            
+            state.lastToken = {style:style, content: stream.current()};
+            
+            if (stream.eol() && stream.lambda) {
+                state.lambda = false;
+            }
+            
+            return style;
+        },
+        
+        indent: function(state, textAfter) {
+            if (state.tokenize != tokenBase) {
+                return 0;
+            }
+            
+            return state.scopes[0].offset;
+        }
+        
+    };
+    return external;
+});
+
+CodeMirror.defineMIME("text/x-python", "python");

IPython/frontend/html/notebook/static/codemirror2/mode/rst/index.html

@@ -0,0 +1,526 b''
+<!doctype html>
+<html>
+  <head>
+    <title>CodeMirror 2: reStructuredText mode</title>
+    <link rel="stylesheet" href="../../lib/codemirror.css">
+    <script src="../../lib/codemirror.js"></script>
+    <script src="rst.js"></script>
+    <link rel="stylesheet" href="rst.css">
+    <style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
+    <link rel="stylesheet" href="../../css/docs.css">
+  </head>
+  <body>
+    <h1>CodeMirror 2: reStructuredText mode</h1>
+
+<form><textarea id="code" name="code">
+.. This is an excerpt from Sphinx documentation: http://sphinx.pocoo.org/_sources/rest.txt
+
+.. highlightlang:: rest
+
+.. _rst-primer:
+
+reStructuredText Primer
+=======================
+
+This section is a brief introduction to reStructuredText (reST) concepts and
+syntax, intended to provide authors with enough information to author documents
+productively.  Since reST was designed to be a simple, unobtrusive markup
+language, this will not take too long.
+
+.. seealso::
+
+   The authoritative `reStructuredText User Documentation
+   &lt;http://docutils.sourceforge.net/rst.html&gt;`_.  The "ref" links in this
+   document link to the description of the individual constructs in the reST
+   reference.
+
+
+Paragraphs
+----------
+
+The paragraph (:duref:`ref &lt;paragraphs&gt;`) is the most basic block in a reST
+document.  Paragraphs are simply chunks of text separated by one or more blank
+lines.  As in Python, indentation is significant in reST, so all lines of the
+same paragraph must be left-aligned to the same level of indentation.
+
+
+.. _inlinemarkup:
+
+Inline markup
+-------------
+
+The standard reST inline markup is quite simple: use
+
+* one asterisk: ``*text*`` for emphasis (italics),
+* two asterisks: ``**text**`` for strong emphasis (boldface), and
+* backquotes: ````text```` for code samples.
+
+If asterisks or backquotes appear in running text and could be confused with
+inline markup delimiters, they have to be escaped with a backslash.
+
+Be aware of some restrictions of this markup:
+
+* it may not be nested,
+* content may not start or end with whitespace: ``* text*`` is wrong,
+* it must be separated from surrounding text by non-word characters.  Use a
+  backslash escaped space to work around that: ``thisis\ *one*\ word``.
+
+These restrictions may be lifted in future versions of the docutils.
+
+reST also allows for custom "interpreted text roles"', which signify that the
+enclosed text should be interpreted in a specific way.  Sphinx uses this to
+provide semantic markup and cross-referencing of identifiers, as described in
+the appropriate section.  The general syntax is ``:rolename:`content```.
+
+Standard reST provides the following roles:
+
+* :durole:`emphasis` -- alternate spelling for ``*emphasis*``
+* :durole:`strong` -- alternate spelling for ``**strong**``
+* :durole:`literal` -- alternate spelling for ````literal````
+* :durole:`subscript` -- subscript text
+* :durole:`superscript` -- superscript text
+* :durole:`title-reference` -- for titles of books, periodicals, and other
+  materials
+
+See :ref:`inline-markup` for roles added by Sphinx.
+
+
+Lists and Quote-like blocks
+---------------------------
+
+List markup (:duref:`ref &lt;bullet-lists&gt;`) is natural: just place an asterisk at
+the start of a paragraph and indent properly.  The same goes for numbered lists;
+they can also be autonumbered using a ``#`` sign::
+
+   * This is a bulleted list.
+   * It has two items, the second
+     item uses two lines.
+
+   1. This is a numbered list.
+   2. It has two items too.
+
+   #. This is a numbered list.
+   #. It has two items too.
+
+
+Nested lists are possible, but be aware that they must be separated from the
+parent list items by blank lines::
+
+   * this is
+   * a list
+
+     * with a nested list
+     * and some subitems
+
+   * and here the parent list continues
+
+Definition lists (:duref:`ref &lt;definition-lists&gt;`) are created as follows::
+
+   term (up to a line of text)
+      Definition of the term, which must be indented
+
+      and can even consist of multiple paragraphs
+
+   next term
+      Description.
+
+Note that the term cannot have more than one line of text.
+
+Quoted paragraphs (:duref:`ref &lt;block-quotes&gt;`) are created by just indenting
+them more than the surrounding paragraphs.
+
+Line blocks (:duref:`ref &lt;line-blocks&gt;`) are a way of preserving line breaks::
+
+   | These lines are
+   | broken exactly like in
+   | the source file.
+
+There are also several more special blocks available:
+
+* field lists (:duref:`ref &lt;field-lists&gt;`)
+* option lists (:duref:`ref &lt;option-lists&gt;`)
+* quoted literal blocks (:duref:`ref &lt;quoted-literal-blocks&gt;`)
+* doctest blocks (:duref:`ref &lt;doctest-blocks&gt;`)
+
+
+Source Code
+-----------
+
+Literal code blocks (:duref:`ref &lt;literal-blocks&gt;`) are introduced by ending a
+paragraph with the special marker ``::``.  The literal block must be indented
+(and, like all paragraphs, separated from the surrounding ones by blank lines)::
+
+   This is a normal text paragraph. The next paragraph is a code sample::
+
+      It is not processed in any way, except
+      that the indentation is removed.
+
+      It can span multiple lines.
+
+   This is a normal text paragraph again.
+
+The handling of the ``::`` marker is smart:
+
+* If it occurs as a paragraph of its own, that paragraph is completely left
+  out of the document.
+* If it is preceded by whitespace, the marker is removed.
+* If it is preceded by non-whitespace, the marker is replaced by a single
+  colon.
+
+That way, the second sentence in the above example's first paragraph would be
+rendered as "The next paragraph is a code sample:".
+
+
+.. _rst-tables:
+
+Tables
+------
+
+Two forms of tables are supported.  For *grid tables* (:duref:`ref
+&lt;grid-tables&gt;`), you have to "paint" the cell grid yourself.  They look like
+this::
+
+   +------------------------+------------+----------+----------+
+   | Header row, column 1   | Header 2   | Header 3 | Header 4 |
+   | (header rows optional) |            |          |          |
+   +========================+============+==========+==========+
+   | body row 1, column 1   | column 2   | column 3 | column 4 |
+   +------------------------+------------+----------+----------+
+   | body row 2             | ...        | ...      |          |
+   +------------------------+------------+----------+----------+
+
+*Simple tables* (:duref:`ref &lt;simple-tables&gt;`) are easier to write, but
+limited: they must contain more than one row, and the first column cannot
+contain multiple lines.  They look like this::
+
+   =====  =====  =======
+   A      B      A and B
+   =====  =====  =======
+   False  False  False
+   True   False  False
+   False  True   False
+   True   True   True
+   =====  =====  =======
+
+
+Hyperlinks
+----------
+
+External links
+^^^^^^^^^^^^^^
+
+Use ```Link text &lt;http://example.com/&gt;`_`` for inline web links.  If the link
+text should be the web address, you don't need special markup at all, the parser
+finds links and mail addresses in ordinary text.
+
+You can also separate the link and the target definition (:duref:`ref
+&lt;hyperlink-targets&gt;`), like this::
+
+   This is a paragraph that contains `a link`_.
+
+   .. _a link: http://example.com/
+
+
+Internal links
+^^^^^^^^^^^^^^
+
+Internal linking is done via a special reST role provided by Sphinx, see the
+section on specific markup, :ref:`ref-role`.
+
+
+Sections
+--------
+
+Section headers (:duref:`ref &lt;sections&gt;`) are created by underlining (and
+optionally overlining) the section title with a punctuation character, at least
+as long as the text::
+
+   =================
+   This is a heading
+   =================
+
+Normally, there are no heading levels assigned to certain characters as the
+structure is determined from the succession of headings.  However, for the
+Python documentation, this convention is used which you may follow:
+
+* ``#`` with overline, for parts
+* ``*`` with overline, for chapters
+* ``=``, for sections
+* ``-``, for subsections
+* ``^``, for subsubsections
+* ``"``, for paragraphs
+
+Of course, you are free to use your own marker characters (see the reST
+documentation), and use a deeper nesting level, but keep in mind that most
+target formats (HTML, LaTeX) have a limited supported nesting depth.
+
+
+Explicit Markup
+---------------
+
+"Explicit markup" (:duref:`ref &lt;explicit-markup-blocks&gt;`) is used in reST for
+most constructs that need special handling, such as footnotes,
+specially-highlighted paragraphs, comments, and generic directives.
+
+An explicit markup block begins with a line starting with ``..`` followed by
+whitespace and is terminated by the next paragraph at the same level of
+indentation.  (There needs to be a blank line between explicit markup and normal
+paragraphs.  This may all sound a bit complicated, but it is intuitive enough
+when you write it.)
+
+
+.. _directives:
+
+Directives
+----------
+
+A directive (:duref:`ref &lt;directives&gt;`) is a generic block of explicit markup.
+Besides roles, it is one of the extension mechanisms of reST, and Sphinx makes
+heavy use of it.
+
+Docutils supports the following directives:
+
+* Admonitions: :dudir:`attention`, :dudir:`caution`, :dudir:`danger`,
+  :dudir:`error`, :dudir:`hint`, :dudir:`important`, :dudir:`note`,
+  :dudir:`tip`, :dudir:`warning` and the generic :dudir:`admonition`.
+  (Most themes style only "note" and "warning" specially.)
+
+* Images:
+
+  - :dudir:`image` (see also Images_ below)
+  - :dudir:`figure` (an image with caption and optional legend)
+
+* Additional body elements:
+
+  - :dudir:`contents` (a local, i.e. for the current file only, table of
+    contents)
+  - :dudir:`container` (a container with a custom class, useful to generate an
+    outer ``&lt;div&gt;`` in HTML)
+  - :dudir:`rubric` (a heading without relation to the document sectioning)
+  - :dudir:`topic`, :dudir:`sidebar` (special highlighted body elements)
+  - :dudir:`parsed-literal` (literal block that supports inline markup)
+  - :dudir:`epigraph` (a block quote with optional attribution line)
+  - :dudir:`highlights`, :dudir:`pull-quote` (block quotes with their own
+    class attribute)
+  - :dudir:`compound` (a compound paragraph)
+
+* Special tables:
+
+  - :dudir:`table` (a table with title)
+  - :dudir:`csv-table` (a table generated from comma-separated values)
+  - :dudir:`list-table` (a table generated from a list of lists)
+
+* Special directives:
+
+  - :dudir:`raw` (include raw target-format markup)
+  - :dudir:`include` (include reStructuredText from another file)
+    -- in Sphinx, when given an absolute include file path, this directive takes
+    it as relative to the source directory
+  - :dudir:`class` (assign a class attribute to the next element) [1]_
+
+* HTML specifics:
+
+  - :dudir:`meta` (generation of HTML ``&lt;meta&gt;`` tags)
+  - :dudir:`title` (override document title)
+
+* Influencing markup:
+
+  - :dudir:`default-role` (set a new default role)
+  - :dudir:`role` (create a new role)
+
+  Since these are only per-file, better use Sphinx' facilities for setting the
+  :confval:`default_role`.
+
+Do *not* use the directives :dudir:`sectnum`, :dudir:`header` and
+:dudir:`footer`.
+
+Directives added by Sphinx are described in :ref:`sphinxmarkup`.
+
+Basically, a directive consists of a name, arguments, options and content. (Keep
+this terminology in mind, it is used in the next chapter describing custom
+directives.)  Looking at this example, ::
+
+   .. function:: foo(x)
+                 foo(y, z)
+      :module: some.module.name
+
+      Return a line of text input from the user.
+
+``function`` is the directive name.  It is given two arguments here, the
+remainder of the first line and the second line, as well as one option
+``module`` (as you can see, options are given in the lines immediately following
+the arguments and indicated by the colons).  Options must be indented to the
+same level as the directive content.
+
+The directive content follows after a blank line and is indented relative to the
+directive start.
+
+
+Images
+------
+
+reST supports an image directive (:dudir:`ref &lt;image&gt;`), used like so::
+
+   .. image:: gnu.png
+      (options)
+
+When used within Sphinx, the file name given (here ``gnu.png``) must either be
+relative to the source file, or absolute which means that they are relative to
+the top source directory.  For example, the file ``sketch/spam.rst`` could refer
+to the image ``images/spam.png`` as ``../images/spam.png`` or
+``/images/spam.png``.
+
+Sphinx will automatically copy image files over to a subdirectory of the output
+directory on building (e.g. the ``_static`` directory for HTML output.)
+
+Interpretation of image size options (``width`` and ``height``) is as follows:
+if the size has no unit or the unit is pixels, the given size will only be
+respected for output channels that support pixels (i.e. not in LaTeX output).
+Other units (like ``pt`` for points) will be used for HTML and LaTeX output.
+
+Sphinx extends the standard docutils behavior by allowing an asterisk for the
+extension::
+
+   .. image:: gnu.*
+
+Sphinx then searches for all images matching the provided pattern and determines
+their type.  Each builder then chooses the best image out of these candidates.
+For instance, if the file name ``gnu.*`` was given and two files :file:`gnu.pdf`
+and :file:`gnu.png` existed in the source tree, the LaTeX builder would choose
+the former, while the HTML builder would prefer the latter.
+
+.. versionchanged:: 0.4
+   Added the support for file names ending in an asterisk.
+
+.. versionchanged:: 0.6
+   Image paths can now be absolute.
+
+
+Footnotes
+---------
+
+For footnotes (:duref:`ref &lt;footnotes&gt;`), use ``[#name]_`` to mark the footnote
+location, and add the footnote body at the bottom of the document after a
+"Footnotes" rubric heading, like so::
+
+   Lorem ipsum [#f1]_ dolor sit amet ... [#f2]_
+
+   .. rubric:: Footnotes
+
+   .. [#f1] Text of the first footnote.
+   .. [#f2] Text of the second footnote.
+
+You can also explicitly number the footnotes (``[1]_``) or use auto-numbered
+footnotes without names (``[#]_``).
+
+
+Citations
+---------
+
+Standard reST citations (:duref:`ref &lt;citations&gt;`) are supported, with the
+additional feature that they are "global", i.e. all citations can be referenced
+from all files.  Use them like so::
+
+   Lorem ipsum [Ref]_ dolor sit amet.
+
+   .. [Ref] Book or article reference, URL or whatever.
+
+Citation usage is similar to footnote usage, but with a label that is not
+numeric or begins with ``#``.
+
+
+Substitutions
+-------------
+
+reST supports "substitutions" (:duref:`ref &lt;substitution-definitions&gt;`), which
+are pieces of text and/or markup referred to in the text by ``|name|``.  They
+are defined like footnotes with explicit markup blocks, like this::
+
+   .. |name| replace:: replacement *text*
+
+or this::
+
+   .. |caution| image:: warning.png
+                :alt: Warning!
+
+See the :duref:`reST reference for substitutions &lt;substitution-definitions&gt;`
+for details.
+
+If you want to use some substitutions for all documents, put them into
+:confval:`rst_prolog` or put them into a separate file and include it into all
+documents you want to use them in, using the :rst:dir:`include` directive.  (Be
+sure to give the include file a file name extension differing from that of other
+source files, to avoid Sphinx finding it as a standalone document.)
+
+Sphinx defines some default substitutions, see :ref:`default-substitutions`.
+
+
+Comments
+--------
+
+Every explicit markup block which isn't a valid markup construct (like the
+footnotes above) is regarded as a comment (:duref:`ref &lt;comments&gt;`).  For
+example::
+
+   .. This is a comment.
+
+You can indent text after a comment start to form multiline comments::
+
+   ..
+      This whole indented block
+      is a comment.
+
+      Still in the comment.
+
+
+Source encoding
+---------------
+
+Since the easiest way to include special characters like em dashes or copyright
+signs in reST is to directly write them as Unicode characters, one has to
+specify an encoding.  Sphinx assumes source files to be encoded in UTF-8 by
+default; you can change this with the :confval:`source_encoding` config value.
+
+
+Gotchas
+-------
+
+There are some problems one commonly runs into while authoring reST documents:
+
+* **Separation of inline markup:** As said above, inline markup spans must be
+  separated from the surrounding text by non-word characters, you have to use a
+  backslash-escaped space to get around that.  See `the reference
+  &lt;http://docutils.sf.net/docs/ref/rst/restructuredtext.html#inline-markup&gt;`_
+  for the details.
+
+* **No nested inline markup:** Something like ``*see :func:`foo`*`` is not
+  possible.
+
+
+.. rubric:: Footnotes
+
+.. [1] When the default domain contains a :rst:dir:`class` directive, this directive
+       will be shadowed.  Therefore, Sphinx re-exports it as :rst:dir:`rst-class`.
+</textarea></form>
+
+    <script>
+      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+        lineNumbers: true,
+      });
+    </script>
+    <p>The reStructuredText mode supports one configuration parameter:</p>
+    <dl>
+      <dt><code>verbatim (string)</code></dt>
+      <dd>A name or MIME type of a mode that will be used for highlighting
+      verbatim blocks. By default, reStructuredText mode uses uniform color
+      for whole block of verbatim text if no mode is given.</dd>
+    </dl>
+    <p>If <code>python</code> mode is available (not a part of CodeMirror 2 yet),
+    it will be used for highlighting blocks containing Python/IPython terminal
+    sessions (blocks starting with <code>&gt;&gt;&gt;</code> (for Python) or
+    <code>In [num]:</code> (for IPython).
+
+    <p><strong>MIME types defined:</strong> <code>text/x-rst</code>.</p>
+  </body>
+</html>
+

IPython/frontend/html/notebook/static/codemirror2/mode/rst/rst.css

@@ -0,0 +1,77 b''
+
+span.rst-emphasis {
+    font-style: italic;
+}
+
+span.rst-strong {
+    font-weight: bold;
+}
+
+span.rst-interpreted {
+    color: #33cc66;
+}
+
+span.rst-inline {
+    color: #3399cc;
+}
+
+span.rst-role {
+    color: #666699;
+}
+
+span.rst-list {
+    color: #cc0099;
+    font-weight: bold;
+}
+
+span.rst-body {
+    color: #6699cc;
+}
+
+span.rst-verbatim {
+    color: #3366ff;
+}
+
+span.rst-comment {
+    color: #aa7700;
+}
+
+span.rst-directive {
+    font-weight: bold;
+    color: #3399ff;
+}
+
+span.rst-hyperlink {
+    font-weight: bold;
+    color: #3366ff;
+}
+
+span.rst-footnote {
+    font-weight: bold;
+    color: #3333ff;
+}
+
+span.rst-citation {
+    font-weight: bold;
+    color: #3300ff;
+}
+
+span.rst-replacement {
+    color: #9933cc;
+}
+
+span.rst-section {
+    font-weight: bold;
+    color: #cc0099;
+}
+
+span.rst-directive-marker {
+    font-weight: bold;
+    color: #3399ff;
+}
+
+span.rst-verbatim-marker {
+    font-weight: bold;
+    color: #9900ff;
+}
+

IPython/frontend/html/notebook/static/codemirror2/mode/rst/rst.js

@@ -0,0 +1,335 b''
+
+CodeMirror.defineMode('rst', function(config, options) {
+    function setState(state, fn, ctx) {
+        state.fn = fn;
+        setCtx(state, ctx);
+    }
+
+    function setCtx(state, ctx) {
+        state.ctx = ctx || {};
+    }
+
+    function setNormal(state, ch) {
+        if (ch && (typeof ch !== 'string')) {
+            var str = ch.current();
+            ch = str[str.length-1];
+        }
+
+        setState(state, normal, {back: ch});
+    }
+
+    function hasMode(mode) {
+        if (mode) {
+            var modes = CodeMirror.listModes();
+
+            for (var i in modes) {
+                if (modes[i] == mode) {
+                    return true;
+                }
+            }
+        }
+
+        return false;
+    }
+
+    function getMode(mode) {
+        if (hasMode(mode)) {
+            return CodeMirror.getMode(config, mode);
+        } else {
+            return null;
+        }
+    }
+
+    var verbatimMode = getMode(options.verbatim);
+    var pythonMode = getMode('python');
+
+    var reSection = /^[!"#$%&'()*+,-./:;<=>?@[\\\]^_`{|}~]/;
+    var reDirective = /^\s*\w([-:.\w]*\w)?::(\s|$)/;
+    var reHyperlink = /^\s*_[\w-]+:(\s|$)/;
+    var reFootnote = /^\s*\[(\d+|#)\](\s|$)/;
+    var reCitation = /^\s*\[[A-Za-z][\w-]*\](\s|$)/;
+    var reFootnoteRef = /^\[(\d+|#)\]_/;
+    var reCitationRef = /^\[[A-Za-z][\w-]*\]_/;
+    var reDirectiveMarker = /^\.\.(\s|$)/;
+    var reVerbatimMarker = /^::\s*$/;
+    var rePreInline = /^[-\s"([{</:]/;
+    var rePostInline = /^[-\s`'")\]}>/:.,;!?\\_]/;
+    var reEnumeratedList = /^\s*((\d+|[A-Za-z#])[.)]|\((\d+|[A-Z-a-z#])\))\s/;
+    var reBulletedList = /^\s*[-\+\*]\s/;
+    var reExamples = /^\s+(>>>|In \[\d+\]:)\s/;
+
+    function normal(stream, state) {
+        var ch, sol, i;
+
+        if (stream.eat(/\\/)) {
+            ch = stream.next();
+            setNormal(state, ch);
+            return null;
+        }
+
+        sol = stream.sol();
+
+        if (sol && (ch = stream.eat(reSection))) {
+            for (i = 0; stream.eat(ch); i++);
+
+            if (i >= 3 && stream.match(/^\s*$/)) {
+                setNormal(state, null);
+                return 'rst-section';
+            } else {
+                stream.backUp(i + 1);
+            }
+        }
+
+        if (sol && stream.match(reDirectiveMarker)) {
+            if (!stream.eol()) {
+                setState(state, directive);
+            }
+
+            return 'rst-directive-marker';
+        }
+
+        if (stream.match(reVerbatimMarker)) {
+            if (!verbatimMode) {
+                setState(state, verbatim);
+            } else {
+                var mode = verbatimMode;
+
+                setState(state, verbatim, {
+                    mode: mode,
+                    local: mode.startState()
+                });
+            }
+
+            return 'rst-verbatim-marker';
+        }
+
+        if (sol && stream.match(reExamples, false)) {
+            if (!pythonMode) {
+                setState(state, verbatim);
+                return 'rst-verbatim-marker';
+            } else {
+                var mode = pythonMode;
+
+                setState(state, verbatim, {
+                    mode: mode,
+                    local: mode.startState()
+                });
+
+                return null;
+            }
+        }
+
+        if (sol && (stream.match(reEnumeratedList) ||
+                    stream.match(reBulletedList))) {
+            setNormal(state, stream);
+            return 'rst-list';
+        }
+
+        function testBackward(re) {
+            return sol || !state.ctx.back || re.test(state.ctx.back);
+        }
+
+        function testForward(re) {
+            return stream.eol() || stream.match(re, false);
+        }
+
+        function testInline(re) {
+            return stream.match(re) && testBackward(/\W/) && testForward(/\W/);
+        }
+
+        if (testInline(reFootnoteRef)) {
+            setNormal(state, stream);
+            return 'rst-footnote';
+        }
+
+        if (testInline(reCitationRef)) {
+            setNormal(state, stream);
+            return 'rst-citation';
+        }
+
+        ch = stream.next();
+
+        if (testBackward(rePreInline)) {
+            if ((ch === ':' || ch === '|') && stream.eat(/\S/)) {
+                var token;
+
+                if (ch === ':') {
+                    token = 'rst-role';
+                } else {
+                    token = 'rst-replacement';
+                }
+
+                setState(state, inline, {
+                    ch: ch,
+                    wide: false,
+                    prev: null,
+                    token: token
+                });
+
+                return token;
+            }
+
+            if (ch === '*' || ch === '`') {
+                var orig = ch,
+                    wide = false;
+
+                ch = stream.next();
+
+                if (ch == orig) {
+                    wide = true;
+                    ch = stream.next();
+                }
+
+                if (ch && !/\s/.test(ch)) {
+                    var token;
+
+                    if (orig === '*') {
+                        token = wide ? 'rst-strong' : 'rst-emphasis';
+                    } else {
+                        token = wide ? 'rst-inline' : 'rst-interpreted';
+                    }
+
+                    setState(state, inline, {
+                        ch: orig,               // inline() has to know what to search for
+                        wide: wide,             // are we looking for `ch` or `chch`
+                        prev: null,             // terminator must not be preceeded with whitespace
+                        token: token            // I don't want to recompute this all the time
+                    });
+
+                    return token;
+                }
+            }
+        }
+
+        setNormal(state, ch);
+        return null;
+    }
+
+    function inline(stream, state) {
+        var ch = stream.next(),
+            token = state.ctx.token;
+
+        function finish(ch) {
+            state.ctx.prev = ch;
+            return token;
+        }
+
+        if (ch != state.ctx.ch) {
+            return finish(ch);
+        }
+
+        if (/\s/.test(state.ctx.prev)) {
+            return finish(ch);
+        }
+
+        if (state.ctx.wide) {
+            ch = stream.next();
+
+            if (ch != state.ctx.ch) {
+                return finish(ch);
+            }
+        }
+
+        if (!stream.eol() && !rePostInline.test(stream.peek())) {
+            if (state.ctx.wide) {
+                stream.backUp(1);
+            }
+
+            return finish(ch);
+        }
+
+        setState(state, normal);
+        setNormal(state, ch);
+
+        return token;
+    }
+
+    function directive(stream, state) {
+        var token = null;
+
+        if (stream.match(reDirective)) {
+            token = 'rst-directive';
+        } else if (stream.match(reHyperlink)) {
+            token = 'rst-hyperlink';
+        } else if (stream.match(reFootnote)) {
+            token = 'rst-footnote';
+        } else if (stream.match(reCitation)) {
+            token = 'rst-citation';
+        } else {
+            stream.eatSpace();
+
+            if (stream.eol()) {
+                setNormal(state, stream);
+                return null;
+            } else {
+                stream.skipToEnd();
+                setState(state, comment);
+                return 'rst-comment';
+            }
+        }
+
+        setState(state, body, {start: true});
+        return token;
+    }
+
+    function body(stream, state) {
+        var token = 'rst-body';
+
+        if (!state.ctx.start || stream.sol()) {
+            return block(stream, state, token);
+        }
+
+        stream.skipToEnd();
+        setCtx(state);
+
+        return token;
+    }
+
+    function comment(stream, state) {
+        return block(stream, state, 'rst-comment');
+    }
+
+    function verbatim(stream, state) {
+        if (!verbatimMode) {
+            return block(stream, state, 'rst-verbatim');
+        } else {
+            if (stream.sol()) {
+                if (!stream.eatSpace()) {
+                    setNormal(state, stream);
+                }
+
+                return null;
+            }
+
+            return verbatimMode.token(stream, state.ctx.local);
+        }
+    }
+
+    function block(stream, state, token) {
+        if (stream.eol() || stream.eatSpace()) {
+            stream.skipToEnd();
+            return token;
+        } else {
+            setNormal(state, stream);
+            return null;
+        }
+    }
+
+    return {
+        startState: function() {
+            return {fn: normal, ctx: {}};
+        },
+
+        copyState: function(state) {
+            return {fn: state.fn, ctx: state.ctx};
+        },
+
+        token: function(stream, state) {
+            var token = state.fn(stream, state);
+            return token;
+        }
+    };
+});
+
+CodeMirror.defineMIME("text/x-rst", "rst");
+

IPython/frontend/html/notebook/static/css/notebook.css

@@ -144,18 +144,7 b' div.prompt {'
 }
 
 div.input_prompt {
-    color: blue;
-}
-
-textarea.input_textarea {
-    width: 100%;
-    text-align: left;
-    border-style: none;
-    padding: 0px;
-    margin: 0px;
-    overflow: auto;
-    outline: none;
-    resize: none;
+    color: navy;
 }
 
 div.output {
@@ -164,7 +153,7 b' div.output {'
 }
 
 div.output_prompt {
-    color: red;
+    color: darkred;
 }
 
 div.output_area {

IPython/frontend/html/notebook/static/js/notebook.js

@@ -131,13 +131,6 b' Notebook.prototype.bind_events = function () {'
                     };
                 };
             }
-        } else if (event.which == 9) {
-            event.preventDefault();
-            var cell = that.selected_cell();
-            if (cell instanceof CodeCell) {
-                var ta = cell.element.find("textarea.input_textarea");
-                ta.val(ta.val() + "    ");
-            };
         };
     });
 };
@@ -442,7 +435,7 b' Notebook.prototype._kernel_started = function () {'
 
     this.kernel.shell_channel.onmessage = function (e) {
         reply = $.parseJSON(e.data);
-        console.log(reply);
+        // console.log(reply);
         var msg_type = reply.msg_type;
         var cell = that.cell_for_msg(reply.parent_header.msg_id);
         if (msg_type === "execute_reply") {
@@ -453,7 +446,7 b' Notebook.prototype._kernel_started = function () {'
     this.kernel.iopub_channel.onmessage = function (e) {
         reply = $.parseJSON(e.data);
         var content = reply.content;
-        console.log(reply);
+        // console.log(reply);
         var msg_type = reply.msg_type;
         var cell = that.cell_for_msg(reply.parent_header.msg_id);
         if (msg_type === "stream") {
@@ -650,8 +643,9 b' Cell.prototype.create_element = function () {};'
 
 
 var CodeCell = function (notebook) {
-    Cell.apply(this, arguments);
+    this.code_mirror = null;
     this.input_prompt_number = ' ';
+    Cell.apply(this, arguments);
 };
 
 
@@ -662,8 +656,13 b' CodeCell.prototype.create_element = function () {'
     var cell =  $('<div></div>').addClass('cell code_cell vbox border-box-sizing');
     var input = $('<div></div>').addClass('input hbox border-box-sizing');
     input.append($('<div/>').addClass('prompt input_prompt monospace-font'));
-    var input_textarea = $('<textarea/>').addClass('input_textarea monospace-font').attr('rows',1).attr('wrap','hard').autogrow();
-    input.append($('<div/>').addClass('input_area box-flex1 border-box-sizing').append(input_textarea));
+    var input_area = $('<div/>').addClass('input_area box-flex1 border-box-sizing');
+    this.code_mirror = CodeMirror(input_area.get(0), {
+        indentUnit : 4,
+        enterMode : 'flat',
+        tabMode: 'shift'
+    });
+    input.append(input_area);
     var output = $('<div></div>').addClass('output vbox border-box-sizing');
     cell.append(input).append(output);
     this.element = cell;
@@ -671,6 +670,12 b' CodeCell.prototype.create_element = function () {'
 };
 
 
+CodeCell.prototype.select = function () {
+    Cell.prototype.select.apply(this);
+    this.code_mirror.focus();
+};
+
+
 CodeCell.prototype.append_pyout = function (data, n) {
     var toinsert = $("<div/>").addClass("output_area output_pyout hbox monospace-font");
     toinsert.append($('<div/>').
@@ -768,12 +773,12 b' CodeCell.prototype.set_input_prompt = function (number) {'
 
 
 CodeCell.prototype.get_code = function () {
-    return this.element.find("textarea.input_textarea").val();
+    return this.code_mirror.getValue();
 };
 
 
 CodeCell.prototype.set_code = function (code) {
-    return this.element.find("textarea.input_textarea").val(code);
+    return this.code_mirror.setValue(code);
 };
 
 
@@ -781,7 +786,6 b' CodeCell.prototype.fromJSON = function (data) {'
     if (data.cell_type === 'code') {
         this.set_code(data.code);
         this.set_input_prompt(data.prompt_number);
-        this.grow(this.element.find("textarea.input_textarea"));
     };
 };
 

IPython/frontend/html/notebook/templates/notebook.html

@@ -6,9 +6,6 b''
 
     <title>IPython Notebook</title>
 
-    <link rel="stylesheet" href="static/css/layout.css" type="text/css" />
-    <link rel="stylesheet" href="static/css/notebook.css" type="text/css" />
-
     <link rel="stylesheet" href="static/jquery/css/themes/aristo/jquery-wijmo.css" type="text/css" />
     <!-- <link rel="stylesheet" href="static/jquery/css/themes/rocket/jquery-wijmo.css" type="text/css" /> -->
     <!-- <link rel="stylesheet" href="static/jquery/css/themes/smoothness/jquery-ui-1.8.11.custom.css" type="text/css" /> -->
@@ -22,6 +19,12 b''
     }
     </script>
 
+    <link rel="stylesheet" href="static/codemirror2/lib/codemirror.css">
+    <link rel="stylesheet" href="static/codemirror2/mode/python/python.css">
+
+    <link rel="stylesheet" href="static/css/layout.css" type="text/css" />
+    <link rel="stylesheet" href="static/css/notebook.css" type="text/css" />
+
 </head>
 
 <body>
@@ -94,6 +97,8 b''
 <script src="static/jquery/js/jquery-ui-1.8.11.custom.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/jquery/js/jquery.autogrow.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/notebook.js" type="text/javascript" charset="utf-8"></script>
+<script src="static/codemirror2/lib/codemirror.js"></script>
+<script src="static/codemirror2/mode/python/python.js"></script>
 
 </body>