RubyGems - erp_app - Versions diffs - 3.1.16 → 4.0.0 - Mend

erp_app 3.1.16 → 4.0.0

Files changed (1634) hide show

data/public/javascripts/erp_app/codemirror/doc/manual.html DELETED Viewed

@@ -1,1231 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8"/>
-    <title>CodeMirror: User Manual</title>
-    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold"/>
-    <link rel="stylesheet" type="text/css" href="docs.css"/>
-    <style>dl dl {margin: 0;}</style>
-  </head>
-  <body>
-<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>
-<div class="grey">
-<img src="baboon.png" class="logo" alt="logo"/>
-<pre>
-/* User manual and
-   reference guide */
-</pre>
-</div>
-<div class="clear"><div class="leftbig blk">
-    <h2 id="overview">Overview</h2>
-    <p>CodeMirror is a code-editor component that can be embedded in
-    Web pages. The code library provides <em>only</em> the editor
-    component, no accompanying buttons, auto-completion, or other IDE
-    functionality. It does provide a rich API on top of which such
-    functionality can be straightforwardly implemented. See
-    the <a href="#addons">add-ons</a> included in the distribution,
-    and
-    the <a href="https://github.com/jagthedrummer/codemirror-ui">CodeMirror
-    UI</a> project, for reusable implementations of extra features.</p>
-    <p>CodeMirror works with language-specific modes. Modes are
-    JavaScript programs that help color (and optionally indent) text
-    written in a given language. The distribution comes with a number
-    of modes (see the <code>mode/</code> directory), and it isn't hard
-    to <a href="#modeapi">write new ones</a> for other languages.</p>
-    <h2 id="usage">Basic Usage</h2>
-    <p>The easiest way to use CodeMirror is to simply load the script
-    and style sheet found under <code>lib/</code> in the distribution,
-    plus a mode script from one of the <code>mode/</code> directories
-    and a theme stylesheet from <code>theme/</code>. (See
-    also <a href="compress.html">the compression helper</a>.) For
-    example:</p>
-    <pre>&lt;script src="lib/codemirror.js">&lt;/script>
-&lt;link rel="stylesheet" href="../lib/codemirror.css">
-&lt;script src="mode/javascript/javascript.js">&lt;/script></pre>
-    <p>Having done this, an editor instance can be created like
-    this:</p>
-    <pre>var myCodeMirror = CodeMirror(document.body);</pre>
-    <p>The editor will be appended to the document body, will start
-    empty, and will use the mode that we loaded. To have more control
-    over the new editor, a configuration object can be passed
-    to <code>CodeMirror</code> as a second argument:</p>
-    <pre>var myCodeMirror = CodeMirror(document.body, {
-  value: "function myScript(){return 100;}\n",
-  mode:  "javascript"
-});</pre>
-    <p>This will initialize the editor with a piece of code already in
-    it, and explicitly tell it to use the JavaScript mode (which is
-    useful when multiple modes are loaded).
-    See <a href="#config">below</a> for a full discussion of the
-    configuration options that CodeMirror accepts.</p>
-    <p>In cases where you don't want to append the editor to an
-    element, and need more control over the way it is inserted, the
-    first argument to the <code>CodeMirror</code> function can also
-    be a function that, when given a DOM element, inserts it into the
-    document somewhere. This could be used to, for example, replace a
-    textarea with a real editor:</p>
-    <pre>var myCodeMirror = CodeMirror(function(elt) {
-  myTextArea.parentNode.replaceChild(elt, myTextArea);
-}, {value: myTextArea.value});</pre>
-    <p>However, for this use case, which is a common way to use
-    CodeMirror, the library provides a much more powerful
-    shortcut:</p>
-    <pre>var myCodeMirror = CodeMirror.fromTextArea(myTextArea);</pre>
-    <p>This will, among other things, ensure that the textarea's value
-    is updated when the form (if it is part of a form) is submitted.
-    See the <a href="#fromTextArea">API reference</a> for a full
-    description of this method.</p>
-    <h2 id="config">Configuration</h2>
-    <p>Both the <code>CodeMirror</code> function and
-    its <code>fromTextArea</code> method take as second (optional)
-    argument an object containing configuration options. Any option
-    not supplied like this will be taken
-    from <code>CodeMirror.defaults</code>, an object containing the
-    default options. You can update this object to change the defaults
-    on your page.</p>
-    <p>Options are not checked in any way, so setting bogus option
-    values is bound to lead to odd errors.</p>
-    <p>These are the supported options:</p>
-    <dl>
-      <dt id="option_value"><code>value (string)</code></dt>
-      <dd>The starting value of the editor.</dd>
-      <dt id="option_mode"><code>mode (string or object)</code></dt>
-      <dd>The mode to use. When not given, this will default to the
-      first mode that was loaded. It may be a string, which either
-      simply names the mode or is
-      a <a href="http://en.wikipedia.org/wiki/MIME">MIME</a> type
-      associated with the mode. Alternatively, it may be an object
-      containing configuration options for the mode, with
-      a <code>name</code> property that names the mode (for
-      example <code>{name: "javascript", json: true}</code>). The demo
-      pages for each mode contain information about what configuration
-      parameters the mode supports. You can ask CodeMirror which modes
-      and MIME types are loaded with
-      the <code>CodeMirror.listModes</code>
-      and <code>CodeMirror.listMIMEs</code> functions.</dd>
-      <dt id="option_theme"><code>theme (string)</code></dt>
-      <dd>The theme to style the editor with. You must make sure the
-      CSS file defining the corresponding <code>.cm-s-[name]</code>
-      styles is loaded (see
-      the <a href="../theme/"><code>theme</code></a> directory in the
-      distribution). The default is <code>"default"</code>, for which
-      colors are included in <code>codemirror.css</code>. It is
-      possible to use multiple theming classes at once—for
-      example <code>"foo bar"</code> will assign both
-      the <code>cm-s-foo</code> and the <code>cm-s-bar</code> classes
-      to the editor.</dd>
-      <dt id="option_indentUnit"><code>indentUnit (integer)</code></dt>
-      <dd>How many spaces a block (whatever that means in the edited
-      language) should be indented. The default is 2.</dd>
-      <dt id="option_smartIndent"><code>smartIndent (boolean)</code></dt>
-      <dd>Whether to use the context-sensitive indentation that the
-      mode provides (or just indent the same as the line before).
-      Defaults to true.</dd>
-      <dt id="option_tabSize"><code>tabSize (integer)</code></dt>
-      <dd>The width of a tab character. Defaults to 4.</dd>
-      <dt id="option_indentWithTabs"><code>indentWithTabs (boolean)</code></dt>
-      <dd>Whether, when indenting, the first N*<code>tabSize</code>
-      spaces should be replaced by N tabs. Default is false.</dd>
-      <dt id="option_electricChars"><code>electricChars (boolean)</code></dt>
-      <dd>Configures whether the editor should re-indent the current
-      line when a character is typed that might change its proper
-      indentation (only works if the mode supports indentation).
-      Default is true.</dd>
-      <dt id="option_autoClearEmptyLines"><code>autoClearEmptyLines (boolean)</code></dt>
-      <dd>When turned on (default is off), this will
-      automatically clear lines consisting only of whitespace when the
-      cursor leaves them. This is mostly useful to prevent auto
-      indentation from introducing trailing whitespace in a file.</dd>
-      <dt id="option_keyMap"><code>keyMap (string)</code></dt>
-      <dd>Configures the keymap to use. The default
-      is <code>"default"</code>, which is the only keymap defined
-      in <code>codemirror.js</code> itself. Extra keymaps are found in
-      the <a href="../keymap/"><code>keymap</code></a> directory. See
-      the <a href="#keymaps">section on keymaps</a> for more
-      information.</dd>
-      <dt id="option_extraKeys"><code>extraKeys (object)</code></dt>
-      <dd>Can be used to specify extra keybindings for the editor,
-      alongside the ones defined
-      by <a href="#option_keyMap"><code>keyMap</code></a>. Should be
-      either null, or a valid <a href="#keymaps">keymap</a> value.</dd>
-      <dt id="option_lineWrapping"><code>lineWrapping (boolean)</code></dt>
-      <dd>Whether CodeMirror should scroll or wrap for long lines.
-      Defaults to <code>false</code> (scroll).</dd>
-      <dt id="option_lineNumbers"><code>lineNumbers (boolean)</code></dt>
-      <dd>Whether to show line numbers to the left of the editor.</dd>
-      <dt id="option_firstLineNumber"><code>firstLineNumber (integer)</code></dt>
-      <dd>At which number to start counting lines. Default is 1.</dd>
-      <dt id="option_lineNumberFormatter"><code>lineNumberFormatter (function(integer))</code></dt>
-      <dd>A function used to format line numbers. The function is passed the current line number. Default prints the line number verbatim.</dd>
-      <dt id="option_gutter"><code>gutter (boolean)</code></dt>
-      <dd>Can be used to force a 'gutter' (empty space on the left of
-      the editor) to be shown even when no line numbers are active.
-      This is useful for setting <a href="#setMarker">markers</a>.</dd>
-      <dt id="option_fixedGutter"><code>fixedGutter (boolean)</code></dt>
-      <dd>When enabled (off by default), this will make the gutter
-      stay visible when the document is scrolled horizontally.</dd>
-      <dt id="option_readOnly"><code>readOnly (boolean)</code></dt>
-      <dd>This disables editing of the editor content by the user. If
-      the special value <code>"nocursor"</code> is given (instead of
-      simply <code>true</code>), focusing of the editor is also
-      disallowed.</dd>
-      <dt id="option_onChange"><code>onChange (function)</code></dt>
-      <dd>When given, this function will be called every time the
-      content of the editor is changed. It will be given the editor
-      instance as first argument, and an <code>{from, to, text, next}</code>
-      object containing information about the changes
-      that occurred as second argument. <code>from</code>
-      and <code>to</code> are the positions (in the pre-change
-      coordinate system) where the change started and
-      ended (for example, it might be <code>{ch:0, line:18}</code> if the
-      position is at the beginning of line #19). <code>text</code>
-      is an array of strings representing the text that replaced the changed
-      range (split by line). If multiple changes happened during a single
-      operation, the object will have a <code>next</code> property pointing to
-      another change object (which may point to another, etc).</dd>
-      <dt id="option_onCursorActivity"><code>onCursorActivity (function)</code></dt>
-      <dd>Will be called when the cursor or selection moves, or any
-      change is made to the editor content.</dd>
-      <dt id="option_onViewportChange"><code>onViewportChange (function)</code></dt>
-      <dd>When given, will be called whenever
-      the <a href="#getViewport">view port</a> of the editor changes
-      (due to scrolling, editing, or any other factor). It will be
-      passed three arguments, the editor instance, the start of the
-      viewport, and its end.</dd>
-      <dt id="option_onGutterClick"><code>onGutterClick (function)</code></dt>
-      <dd>When given, will be called whenever the editor gutter (the
-      line-number area) is clicked. Will be given the editor instance
-      as first argument, the (zero-based) number of the line that was
-      clicked as second argument, and the raw <code>mousedown</code>
-      event object as third argument.</dd>
-      <dt id="option_onFocus"><code>onFocus, onBlur (function)</code></dt>
-      <dd>The given functions will be called whenever the editor is
-      focused or unfocused.</dd>
-      <dt id="option_onScroll"><code>onScroll (function)</code></dt>
-      <dd>When given, will be called whenever the editor is
-      scrolled.</dd>
-      <dt id="option_onUpdate"><code>onUpdate (function)</code></dt>
-      <dd>Will be called whenever CodeMirror updates its DOM display.</dd>
-      <dt id="option_matchBrackets"><code>matchBrackets (boolean)</code></dt>
-      <dd>Determines whether brackets are matched whenever the cursor
-      is moved next to a bracket.</dd>
-      <dt id="option_cursorBlinkRate"><code>cursorBlinkRate (number)</code></dt>
-      <dd>Half-period in milliseconds used for cursor blinking. The default blink
-      rate is 530ms.</dd>
-      <dt id="option_workTime"><code>workTime, workDelay (number)</code></dt>
-      <dd>Highlighting is done by a pseudo background-thread that will
-      work for <code>workTime</code> milliseconds, and then use
-      timeout to sleep for <code>workDelay</code> milliseconds. The
-      defaults are 200 and 300, you can change these options to make
-      the highlighting more or less aggressive.</dd>
-      <dt id="option_pollInterval"><code>pollInterval (number)</code></dt>
-      <dd>Indicates how quickly CodeMirror should poll its input
-      textarea for changes. Most input is captured by events, but some
-      things, like IME input on some browsers, doesn't generate events
-      that allow CodeMirror to properly detect it. Thus, it polls.
-      Default is 100 milliseconds.</dd>
-      <dt id="option_undoDepth"><code>undoDepth (integer)</code></dt>
-      <dd>The maximum number of undo levels that the editor stores.
-      Defaults to 40.</dd>
-      <dt id="option_tabindex"><code>tabindex (integer)</code></dt>
-      <dd>The <a href="http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex">tab
-      index</a> to assign to the editor. If not given, no tab index
-      will be assigned.</dd>
-      <dt id="option_autofocus"><code>autofocus (boolean)</code></dt>
-      <dd>Can be used to make CodeMirror focus itself on
-      initialization. Defaults to off.
-      When <a href="#fromTextArea"><code>fromTextArea</code></a> is
-      used, and no explicit value is given for this option, it will be
-      set to true when either the source textarea is focused, or it
-      has an <code>autofocus</code> attribute and no other element is
-      focused.</dd>
-      <dt id="option_dragDrop"><code>dragDrop (boolean)</code></dt>
-      <dd>Controls whether drag-and-drop is enabled. On by default.</dd>
-      <dt id="option_onDragEvent"><code>onDragEvent (function)</code></dt>
-      <dd>When given, this will be called when the editor is handling
-      a <code>dragenter</code>, <code>dragover</code>,
-      or <code>drop</code> event. It will be passed the editor instance
-      and the event object as arguments. The callback can choose to
-      handle the event itself, in which case it should
-      return <code>true</code> to indicate that CodeMirror should not
-      do anything further.</dd>
-      <dt id="option_onKeyEvent"><code>onKeyEvent (function)</code></dt>
-      <dd>This provides a rather low-level hook into CodeMirror's key
-      handling. If provided, this function will be called on
-      every <code>keydown</code>, <code>keyup</code>,
-      and <code>keypress</code> event that CodeMirror captures. It
-      will be passed two arguments, the editor instance and the key
-      event. This key event is pretty much the raw key event, except
-      that a <code>stop()</code> method is always added to it. You
-      could feed it to, for example, <code>jQuery.Event</code> to
-      further normalize it.<br>This function can inspect the key
-      event, and handle it if it wants to. It may return true to tell
-      CodeMirror to ignore the event. Be wary that, on some browsers,
-      stopping a <code>keydown</code> does not stop
-      the <code>keypress</code> from firing, whereas on others it
-      does. If you respond to an event, you should probably inspect
-      its <code>type</code> property and only do something when it
-      is <code>keydown</code> (or <code>keypress</code> for actions
-      that need character data).</dd>
-    </dl>
-    <h2 id="keymaps">Keymaps</h2>
-    <p>Keymaps are ways to associate keys with functionality. A keymap
-    is an object mapping strings that identify the keys to functions
-    that implement their functionality.</p>
-    <p>Keys are identified either by name or by character.
-    The <code>CodeMirror.keyNames</code> object defines names for
-    common keys and associates them with their key codes. Examples of
-    names defined here are <code>Enter</code>, <code>F5</code>,
-    and <code>Q</code>. These can be prefixed
-    with <code>Shift-</code>, <code>Cmd-</code>, <code>Ctrl-</code>,
-    and <code>Alt-</code> (in that order!) to specify a modifier. So
-    for example, <code>Shift-Ctrl-Space</code> would be a valid key
-    identifier.</p>
-    <p>Alternatively, a character can be specified directly by
-    surrounding it in single quotes, for example <code>'$'</code>
-    or <code>'q'</code>. Due to limitations in the way browsers fire
-    key events, these may not be prefixed with modifiers.</p>
-    <p>The <code>CodeMirror.keyMap</code> object associates keymaps
-    with names. User code and keymap definitions can assign extra
-    properties to this object. Anywhere where a keymap is expected, a
-    string can be given, which will be looked up in this object. It
-    also contains the <code>"default"</code> keymap holding the
-    default bindings.</p>
-    <p>The values of properties in keymaps can be either functions of
-    a single argument (the CodeMirror instance), strings, or
-    <code>false</code>. Such strings refer to properties of the
-    <code>CodeMirror.commands</code> object, which defines a number of
-    common commands that are used by the default keybindings, and maps
-    them to functions. If the property is set to <code>false</code>,
-    CodeMirror leaves handling of the key up to the browser. A key
-    handler function may throw <code>CodeMirror.Pass</code> to indicate
-    that it has decided not to handle the key, and other handlers (or
-    the default behavior) should be given a turn.</p>
-    <p>Keys mapped to command names that start with the
-    characters <code>"go"</code> (which should be used for
-    cursor-movement actions) will be fired even when an
-    extra <code>Shift</code> modifier is present (i.e. <code>"Up":
-    "goLineUp"</code> matches both up and shift-up). This is used to
-    easily implement shift-selection.</p>
-    <p>Keymaps can defer to each other by defining
-    a <code>fallthrough</code> property. This indicates that when a
-    key is not found in the map itself, one or more other maps should
-    be searched. It can hold either a single keymap or an array of
-    keymaps.</p>
-    <p>When a keymap contains a <code>nofallthrough</code> property
-    set to <code>true</code>, keys matched against that map will be
-    ignored if they don't match any of the bindings in the map (no
-    further child maps will be tried, and the default effect of
-    inserting a character will not occur).</p>
-    <h2 id="styling">Customized Styling</h2>
-    <p>Up to a certain extent, CodeMirror's look can be changed by
-    modifying style sheet files. The style sheets supplied by modes
-    simply provide the colors for that mode, and can be adapted in a
-    very straightforward way. To style the editor itself, it is
-    possible to alter or override the styles defined
-    in <a href="../lib/codemirror.css"><code>codemirror.css</code></a>.</p>
-    <p>Some care must be taken there, since a lot of the rules in this
-    file are necessary to have CodeMirror function properly. Adjusting
-    colors should be safe, of course, and with some care a lot of
-    other things can be changed as well. The CSS classes defined in
-    this file serve the following roles:</p>
-    <dl>
-      <dt id="class_CodeMirror"><code>CodeMirror</code></dt>
-      <dd>The outer element of the editor. This should be used for the
-      editor width, borders and positioning. Can also be used to set
-      styles that should hold for everything inside the editor (such
-      as font and font size), or to set a background.</dd>
-      <dt id="class_CodeMirror_scroll"><code>CodeMirror-scroll</code></dt>
-      <dd>This determines the editor's height, and whether the editor
-      scrolls (<code>overflow: auto</code> + fixed height). By
-      default, it does. Giving this <code>height: auto; overflow:
-      visible;</code> will cause the editor to resize to fit its
-      content.</dd>
-      <dt id="class_CodeMirror_focused"><code>CodeMirror-focused</code></dt>
-      <dd>Whenever the editor is focused, the top element gets this
-      class. This is used to hide the cursor and give the selection a
-      different color when the editor is not focused.</dd>
-      <dt id="class_CodeMirror_gutter"><code>CodeMirror-gutter</code></dt>
-      <dd>Use this for giving a background or a border to the editor
-      gutter. Don't set any padding here,
-      use <code>CodeMirror-gutter-text</code> for that. By default,
-      the gutter is 'fluid', meaning it will adjust its width to the
-      maximum line number or line marker width. You can also set a
-      fixed width if you want.</dd>
-      <dt id="class_CodeMirror_gutter_text"><code>CodeMirror-gutter-text</code></dt>
-      <dd>Used to style the actual line numbers. For the numbers to
-      line up, you must make sure that the font in the gutter is the
-      same as the one in the rest of the editor, so you should
-      probably only set font style and size in
-      the <code>CodeMirror</code> class.</dd>
-      <dt id="class_CodeMirror_lines"><code>CodeMirror-lines</code></dt>
-      <dd>The visible lines. If this has vertical
-      padding, <code>CodeMirror-gutter</code> should have the same
-      padding.</dd>
-      <dt id="class_CodeMirror_cursor"><code>CodeMirror-cursor</code></dt>
-      <dd>The cursor is a block element that is absolutely positioned.
-      You can make it look whichever way you want.</dd>
-      <dt id="class_CodeMirror_selected"><code>CodeMirror-selected</code></dt>
-      <dd>The selection is represented by <code>span</code> elements
-      with this class.</dd>
-      <dt id="class_CodeMirror_matchingbracket"><code>CodeMirror-matchingbracket</code>,
-        <code>CodeMirror-nonmatchingbracket</code></dt>
-      <dd>These are used to style matched (or unmatched) brackets.</dd>
-    </dl>
-    <p id="css-resize">So note carefully that, in order to resize the
-    editor, you should set a <code>width</code> on
-    the <a href="#getWrapperElement">wrapper</a>
-    (class <code>CodeMirror</code>) element, and a height on
-    the <a href="#getScrollerElement">scroller</a>
-    (class <code>CodeMirror-scroll</code>) element.</p>
-    <p>The actual lines, as well as the cursor, are represented
-    by <code>pre</code> elements. By default no text styling (such as
-    bold) that might change line height is applied. If you do want
-    such effects, you'll have to give <code>CodeMirror pre</code> a
-    fixed height.</p>
-    <p>If your page's style sheets do funky things to
-    all <code>div</code> or <code>pre</code> elements (you probably
-    shouldn't do that), you'll have to define rules to cancel these
-    effects out again for elements under the <code>CodeMirror</code>
-    class.</p>
-    <p>Themes are also simply CSS files, which define colors for
-    various syntactic elements. See the files in
-    the <a href="../theme/"><code>theme</code></a> directory.</p>
-    <h2 id="api">Programming API</h2>
-    <p>A lot of CodeMirror features are only available through its API.
-    This has the disadvantage that you need to do work to enable them,
-    and the advantage that CodeMirror will fit seamlessly into your
-    application.</p>
-    <p>Whenever points in the document are represented, the API uses
-    objects with <code>line</code> and <code>ch</code> properties.
-    Both are zero-based. CodeMirror makes sure to 'clip' any positions
-    passed by client code so that they fit inside the document, so you
-    shouldn't worry too much about sanitizing your coordinates. If you
-    give <code>ch</code> a value of <code>null</code>, or don't
-    specify it, it will be replaced with the length of the specified
-    line.</p>
-    <dl>
-      <dt id="getValue"><code>getValue() → string</code></dt>
-      <dd>Get the current editor content. You can pass it an optional
-      argument to specify the string to be used to separate lines
-      (defaults to <code>"\n"</code>).</dd>
-      <dt id="setValue"><code>setValue(string)</code></dt>
-      <dd>Set the editor content.</dd>
-      <dt id="getSelection"><code>getSelection() → string</code></dt>
-      <dd>Get the currently selected code.</dd>
-      <dt id="replaceSelection"><code>replaceSelection(string)</code></dt>
-      <dd>Replace the selection with the given string.</dd>
-      <dt id="setSize"><code>setSize(width, height)</code></dt>
-      <dd>Programatically set the size of the editor (overriding the
-      applicable <a href="#css-resize">CSS
-      rules</a>). <code>width</code> and <code>height</code> height
-      can be either numbers (interpreted as pixels) or CSS units
-      (<code>"100%"</code>, for example). You can
-      pass <code>null</code> for either of them to indicate that that
-      dimension should not be changed.</dd>
-      <dt id="focus"><code>focus()</code></dt>
-      <dd>Give the editor focus.</dd>
-      <dt id="scrollTo"><code>scrollTo(x, y)</code></dt>
-      <dd>Scroll the editor to a given (pixel) position. Both
-      arguments may be left as <code>null</code>
-      or <code>undefined</code> to have no effect.</dd>
-      <dt id="getScrollInfo"><code>getScrollInfo()</code></dt>
-      <dd>Get an <code>{x, y, width, height}</code> object that
-      represents the current scroll position and scrollable area size
-      of the editor.</dd>
-      <dt id="setOption"><code>setOption(option, value)</code></dt>
-      <dd>Change the configuration of the editor. <code>option</code>
-      should the name of an <a href="#config">option</a>,
-      and <code>value</code> should be a valid value for that
-      option.</dd>
-      <dt id="getOption"><code>getOption(option) → value</code></dt>
-      <dd>Retrieves the current value of the given option for this
-      editor instance.</dd>
-      <dt id="getMode"><code>getMode() → object</code></dt>
-      <dd>Gets the mode object for the editor. Note that this is
-      distinct from <code>getOption("mode")</code>, which gives you
-      the mode specification, rather than the resolved, instantiated
-      <a href="#defineMode">mode object</a>.</dd>
-      <dt id="cursorCoords"><code>cursorCoords(start, mode) → object</code></dt>
-      <dd>Returns an <code>{x, y, yBot}</code> object containing the
-      coordinates of the cursor. If <code>mode</code>
-      is <code>"local"</code>, they will be relative to the top-left
-      corner of the editable document. If it is <code>"page"</code> or
-      not given, they are relative to the top-left corner of the
-      page. <code>yBot</code> is the coordinate of the bottom of the
-      cursor. <code>start</code> is a boolean indicating whether you
-      want the start or the end of the selection.</dd>
-      <dt id="charCoords"><code>charCoords(pos, mode) → object</code></dt>
-      <dd>Like <code>cursorCoords</code>, but returns the position of
-      an arbitrary characters. <code>pos</code> should be
-      a <code>{line, ch}</code> object.</dd>
-      <dt id="coordsChar"><code>coordsChar(object) → pos</code></dt>
-      <dd>Given an <code>{x, y}</code> object (in page coordinates),
-      returns the <code>{line, ch}</code> position that corresponds to
-      it.</dd>
-      <dt id="undo"><code>undo()</code></dt>
-      <dd>Undo one edit (if any undo events are stored).</dd>
-      <dt id="redo"><code>redo()</code></dt>
-      <dd>Redo one undone edit.</dd>
-      <dt id="historySize"><code>historySize() → object</code></dt>
-      <dd>Returns an object with <code>{undo, redo}</code> properties,
-      both of which hold integers, indicating the amount of stored
-      undo and redo operations.</dd>
-      <dt id="clearHistory"><code>clearHistory()</code></dt>
-      <dd>Clears the editor's undo history.</dd>
-      <dt id="getHistory"><code>getHistory() → object</code></dt>
-      <dd>Get a (JSON-serializeable) representation of the undo history.</dd>
-      <dt id="setHistory"><code>setHistory(object)</code></dt>
-      <dd>Replace the editor's undo history with the one provided,
-      which must be a value as returned
-      by <a href="#getHistory"><code>getHistory</code></a>. Note that
-      this will have entirely undefined results if the editor content
-      isn't also the same as it was when <code>getHistory</code> was
-      called.</dd>
-      <dt id="indentLine"><code>indentLine(line, dir)</code></dt>
-      <dd>Reset the given line's indentation to the indentation
-      prescribed by the mode. If the second argument is given,
-      indentation will be increased (if <code>dir</code> is true) or
-      decreased (if false) by an <a href="#option_indentUnit">indent
-      unit</a> instead.</dd>
-      <dt id="getTokenAt"><code>getTokenAt(pos) → object</code></dt>
-      <dd>Retrieves information about the token the current mode found
-      before the given position (a <code>{line, ch}</code> object). The
-      returned object has the following properties:
-      <dl>
-        <dt><code>start</code></dt><dd>The character (on the given line) at which the token starts.</dd>
-        <dt><code>end</code></dt><dd>The character at which the token ends.</dd>
-        <dt><code>string</code></dt><dd>The token's string.</dd>
-        <dt><code>className</code></dt><dd>The class the mode assigned
-        to the token. (Can be null when no class was assigned.)</dd>
-        <dt><code>state</code></dt><dd>The mode's state at the end of this token.</dd>
-      </dl></dd>
-      <dt id="markText"><code>markText(from, to, className, options) → object</code></dt>
-      <dd>Can be used to mark a range of text with a specific CSS
-      class name. <code>from</code> and <code>to</code> should
-      be <code>{line, ch}</code> objects. The <code>options</code>
-      parameter is optional. When given, it should be an object that
-      may contain the following configuration options:
-      <dl>
-        <dt><code>inclusiveLeft</code></dt><dd>Determines whether
-        text inserted on the left of the marker will end up inside
-        or outside of it.</dd>
-        <dt><code>inclusiveRight</code></dt><dd>Like <code>inclusiveLeft</code>,
-        but for the right side.</dd>
-        <dt><code>startStyle</code></dt><dd>Can be used to specify
-        an extra CSS class to be applied to the leftmost span that
-        is part of the marker.</dd>
-        <dt><code>endStyle</code></dt><dd>Equivalent
-        to <code>startStyle</code>, but for the rightmost span.</dd>
-      </dl>
-      The method will return an object with two methods,
-      <code>clear()</code>, which removes the mark,
-      and <code>find()</code>, which returns a <code>{from, to}</code>
-      (both document positions), indicating the current position of
-      the marked range, or <code>undefined</code> if the marker is no
-      longer in the document.</dd>
-      <dt id="setBookmark"><code>setBookmark(pos) → object</code></dt>
-      <dd>Inserts a bookmark, a handle that follows the text around it
-      as it is being edited, at the given position. A bookmark has two
-      methods <code>find()</code> and <code>clear()</code>. The first
-      returns the current position of the bookmark, if it is still in
-      the document, and the second explicitly removes the
-      bookmark.</dd>
-      <dt id="findMarksAt"><code>findMarksAt(pos) → array</code></dt>
-      <dd>Returns an array of all the bookmarks and marked ranges
-      present at the given position.</dd>
-      <dt id="setMarker"><code>setMarker(line, text, className) → lineHandle</code></dt>
-      <dd>Add a gutter marker for the given line. Gutter markers are
-      shown in the line-number area (instead of the number for this
-      line). Both <code>text</code> and <code>className</code> are
-      optional. Setting <code>text</code> to a Unicode character like
-      ● tends to give a nice effect. To put a picture in the gutter,
-      set <code>text</code> to a space and <code>className</code> to
-      something that sets a background image. If you
-      specify <code>text</code>, the given text (which may contain
-      HTML) will, by default, replace the line number for that line.
-      If this is not what you want, you can include the
-      string <code>%N%</code> in the text, which will be replaced by
-      the line number.</dd>
-      <dt id="clearMarker"><code>clearMarker(line)</code></dt>
-      <dd>Clears a marker created
-      with <code>setMarker</code>. <code>line</code> can be either a
-      number or a handle returned by <code>setMarker</code> (since a
-      number may now refer to a different line if something was added
-      or deleted).</dd>
-      <dt id="setLineClass"><code>setLineClass(line, className, backgroundClassName) → lineHandle</code></dt>
-      <dd>Set a CSS class name for the given line. <code>line</code>
-      can be a number or a line handle (as returned
-      by <code>setMarker</code> or this
-      function). <code>className</code> will be used to style the text
-      for the line, and <code>backgroundClassName</code> to style its
-      background (which lies behind the selection).
-      Pass <code>null</code> to clear the classes for a line.</dd>
-      <dt id="hideLine"><code>hideLine(line) → lineHandle</code></dt>
-      <dd>Hide the given line (either by number or by handle). Hidden
-      lines don't show up in the editor, and their numbers are skipped
-      when <a href="#option_lineNumbers">line numbers</a> are enabled.
-      Deleting a region around them does delete them, and coping a
-      region around will include them in the copied text.</dd>
-      <dt id="showLine"><code>showLine(line) → lineHandle</code></dt>
-      <dd>The inverse of <code>hideLine</code>—re-shows a previously
-      hidden line, by number or by handle.</dd>
-      <dt id="onDeleteLine"><code>onDeleteLine(line, func)</code></dt>
-      <dd>Register a function that should be called when the line is
-      deleted from the document.</dd>
-      <dt id="lineInfo"><code>lineInfo(line) → object</code></dt>
-      <dd>Returns the line number, text content, and marker status of
-      the given line, which can be either a number or a handle
-      returned by <code>setMarker</code>. The returned object has the
-      structure <code>{line, handle, text, markerText, markerClass,
-      lineClass, bgClass}</code>.</dd>
-      <dt id="getLineHandle"><code>getLineHandle(num) → lineHandle</code></dt>
-      <dd>Fetches the line handle for the given line number.</dd>
-      <dt id="getViewport"><code>getViewport() → object</code></dt>
-      <dd>Returns a <code>{from, to}</code> object indicating the
-      start (inclusive) and end (exclusive) of the currently displayed
-      part of the document. In big documents, when most content is
-      scrolled out of view, CodeMirror will only render the visible
-      part, and a margin around it. See also
-      the <a href="#option_onViewportChange"><code>onViewportChange</code></a>
-      option.</dd>
-      <dt id="addWidget"><code>addWidget(pos, node, scrollIntoView)</code></dt>
-      <dd>Puts <code>node</code>, which should be an absolutely
-      positioned DOM node, into the editor, positioned right below the
-      given <code>{line, ch}</code> position.
-      When <code>scrollIntoView</code> is true, the editor will ensure
-      that the entire node is visible (if possible). To remove the
-      widget again, simply use DOM methods (move it somewhere else, or
-      call <code>removeChild</code> on its parent).</dd>
-      <dt id="matchBrackets"><code>matchBrackets()</code></dt>
-      <dd>Force matching-bracket-highlighting to happen.</dd>
-      <dt id="lineCount"><code>lineCount() → number</code></dt>
-      <dd>Get the number of lines in the editor.</dd>
-      <dt id="getCursor"><code>getCursor(start) → object</code></dt>
-      <dd><code>start</code> is a boolean indicating whether the start
-      or the end of the selection must be retrieved. If it is not
-      given, the current cursor pos, i.e. the side of the selection
-      that would move if you pressed an arrow key, is chosen.
-      A <code>{line, ch}</code> object will be returned.</dd>
-      <dt id="somethingSelected"><code>somethingSelected() → boolean</code></dt>
-      <dd>Return true if any text is selected.</dd>
-      <dt id="setCursor"><code>setCursor(pos)</code></dt>
-      <dd>Set the cursor position. You can either pass a
-      single <code>{line, ch}</code> object, or the line and the
-      character as two separate parameters.</dd>
-      <dt id="setSelection"><code>setSelection(start, end)</code></dt>
-      <dd>Set the selection range. <code>start</code>
-      and <code>end</code> should be <code>{line, ch}</code> objects.</dd>
-      <dt id="getLine"><code>getLine(n) → string</code></dt>
-      <dd>Get the content of line <code>n</code>.</dd>
-      <dt id="setLine"><code>setLine(n, text)</code></dt>
-      <dd>Set the content of line <code>n</code>.</dd>
-      <dt id="removeLine"><code>removeLine(n)</code></dt>
-      <dd>Remove the given line from the document.</dd>
-      <dt id="getRange"><code>getRange(from, to) → string</code></td>
-      <dd>Get the text between the given points in the editor, which
-      should be <code>{line, ch}</code> objects. An optional third
-      argument can be given to indicate the line separator string to
-      use (defaults to <code>"\n"</code>).</dd>
-      <dt id="replaceRange"><code>replaceRange(string, from, to)</code></dt>
-      <dd>Replace the part of the document between <code>from</code>
-      and <code>to</code> with the given string. <code>from</code>
-      and <code>to</code> must be <code>{line, ch}</code>
-      objects. <code>to</code> can be left off to simply insert the
-      string at position <code>from</code>.</dd>
-      <dt id="posFromIndex"><code>posFromIndex(index) → object</code></dt>
-      <dd>Calculates and returns a <code>{line, ch}</code> object for a
-      zero-based <code>index</code> who's value is relative to the start of the
-      editor's text. If the <code>index</code> is out of range of the text then
-      the returned object is clipped to start or end of the text
-      respectively.</dd>
-      <dt id="indexFromPos"><code>indexFromPos(object) → number</code></dt>
-      <dd>The reverse of <a href="#posFromIndex"><code>posFromIndex</code></a>.</dd>
-    </dl>
-    <p>The following are more low-level methods:</p>
-    <dl>
-      <dt id="operation"><code>operation(func) → result</code></dt>
-      <dd>CodeMirror internally buffers changes and only updates its
-      DOM structure after it has finished performing some operation.
-      If you need to perform a lot of operations on a CodeMirror
-      instance, you can call this method with a function argument. It
-      will call the function, buffering up all changes, and only doing
-      the expensive update after the function returns. This can be a
-      lot faster. The return value from this method will be the return
-      value of your function.</dd>
-      <dt id="compoundChange"><code>compoundChange(func) → result</code></dt>
-      <dd>Will call the given function (and return its result),
-      combining all changes made while that function executes into a
-      single undo event.</dd>
-      <dt id="refresh"><code>refresh()</code></dt>
-      <dd>If your code does something to change the size of the editor
-      element (window resizes are already listened for), or unhides
-      it, you should probably follow up by calling this method to
-      ensure CodeMirror is still looking as intended.</dd>
-      <dt id="getInputField"><code>getInputField() → textarea</code></dt>
-      <dd>Returns the hidden textarea used to read input.</dd>
-      <dt id="getWrapperElement"><code>getWrapperElement() → node</code></dt>
-      <dd>Returns the DOM node that represents the editor, and
-      controls its width. Remove this from your tree to delete an
-      editor instance. Set it's <code>width</code> style when
-      resizing.</dd>
-      <dt id="getScrollerElement"><code>getScrollerElement() → node</code></dt>
-      <dd>Returns the DOM node that is responsible for the vertical
-      sizing and horizontal scrolling of the editor. You can change
-      the <code>height</code> style of this element to resize an
-      editor. (You might have to call
-      the <a href="#refresh"><code>refresh</code></a> method
-      afterwards.)</dd>
-      <dt id="getGutterElement"><code>getGutterElement() → node</code></dt>
-      <dd>Fetches the DOM node that represents the editor gutter.</dd>
-      <dt id="getStateAfter"><code>getStateAfter(line) → state</code></dt>
-      <dd>Returns the mode's parser state, if any, at the end of the
-      given line number. If no line number is given, the state at the
-      end of the document is returned. This can be useful for storing
-      parsing errors in the state, or getting other kinds of
-      contextual information for a line.</dd>
-    </dl>
-    <p id="version">The <code>CodeMirror</code> object itself provides
-    several useful properties. Firstly, its <code>version</code>
-    property contains a string that indicates the version of the
-    library. For releases, this simply
-    contains <code>"major.minor"</code> (for
-    example <code>"2.33"</code>. For beta versions, <code>" B"</code>
-    (space, capital B) is added at the end of the string, for
-    development snapshots, <code>" +"</code> (space, plus) is
-    added.</p>
-    <p id="fromTextArea">The <code>CodeMirror.fromTextArea</code>
-    method provides another way to initialize an editor. It takes a
-    textarea DOM node as first argument and an optional configuration
-    object as second. It will replace the textarea with a CodeMirror
-    instance, and wire up the form of that textarea (if any) to make
-    sure the editor contents are put into the textarea when the form
-    is submitted. A CodeMirror instance created this way has three
-    additional methods:</p>
-    <dl>
-      <dt id="save"><code>save()</code></dt>
-      <dd>Copy the content of the editor into the textarea.</dd>
-      <dt id="toTextArea"><code>toTextArea()</code></dt>
-      <dd>Remove the editor, and restore the original textarea (with
-      the editor's current content).</dd>
-      <dt id="getTextArea"><code>getTextArea() → textarea</code></dt>
-      <dd>Returns the textarea that the instance was based on.</dd>
-    </dl>
-    <p id="defineExtension">If you want to define extra methods in terms
-    of the CodeMirror API, it is possible to
-    use <code>CodeMirror.defineExtension(name, value)</code>. This
-    will cause the given value (usually a method) to be added to all
-    CodeMirror instances created from then on.</p>
-    <p id="defineInitHook">If your extention just needs to run some
-    code whenever a CodeMirror instance is initialized,
-    use <code>CodeMirror.defineInitHook</code>. Give it a function as
-    its only argument, and from then on, that function will be called
-    (with the instance as argument) whenever a new CodeMirror instance
-    is initialized.</p>
-    <h2 id="addons">Add-ons</h2>
-    <p>The <code>lib/util</code> directory in the distribution
-    contains a number of reusable components that implement extra
-    editor functionality. In brief, they are:</p>
-    <dl>
-      <dt id="util_dialog"><a href="../lib/util/dialog.js"><code>dialog.js</code></a></dt>
-      <dd>Provides a very simple way to query users for text input.
-      Adds an <code>openDialog</code> method to CodeMirror instances,
-      which can be called with an HTML fragment that provides the
-      prompt (should include an <code>input</code> tag), and a
-      callback function that is called when text has been entered.
-      Depends on <code>lib/util/dialog.css</code>.</dd>
-      <dt id="util_searchcursor"><a href="../lib/util/searchcursor.js"><code>searchcursor.js</code></a></dt>
-      <dd>Adds the <code>getSearchCursor(query, start, caseFold) →
-      cursor</code> method to CodeMirror instances, which can be used
-      to implement search/replace functionality. <code>query</code>
-      can be a regular expression or a string (only strings will match
-      across lines—if they contain newlines). <code>start</code>
-      provides the starting position of the search. It can be
-      a <code>{line, ch}</code> object, or can be left off to default
-      to the start of the document. <code>caseFold</code> is only
-      relevant when matching a string. It will cause the search to be
-      case-insensitive. A search cursor has the following methods:
-        <dl>
-          <dt><code>findNext(), findPrevious() → boolean</code></dt>
-          <dd>Search forward or backward from the current position.
-          The return value indicates whether a match was found. If
-          matching a regular expression, the return value will be the
-          array returned by the <code>match</code> method, in case you
-          want to extract matched groups.</dd>
-          <dt><code>from(), to() → object</code></dt>
-          <dd>These are only valid when the last call
-          to <code>findNext</code> or <code>findPrevious</code> did
-          not return false. They will return <code>{line, ch}</code>
-          objects pointing at the start and end of the match.</dd>
-          <dt><code>replace(text)</code></dt>
-          <dd>Replaces the currently found match with the given text
-          and adjusts the cursor position to reflect the
-          replacement.</dd>
-        </dl></dd>
-      <dt id="util_search"><a href="../lib/util/search.js"><code>search.js</code></a></dt>
-      <dd>Implements the search commands. CodeMirror has keys bound to
-      these by default, but will not do anything with them unless an
-      implementation is provided. Depends
-      on <code>searchcursor.js</code>, and will make use
-      of <a href="#util_dialog"><code>openDialog</code></a> when
-      available to make prompting for search queries less ugly.</dd>
-      <dt id="util_foldcode"><a href="../lib/util/foldcode.js"><code>foldcode.js</code></a></dt>
-      <dd>Helps with code folding.
-      See <a href="../demo/folding.html">the demo</a> for an example.
-      Call <code>CodeMirror.newFoldFunction</code> with a range-finder
-      helper function to create a function that will, when applied to
-      a CodeMirror instance and a line number, attempt to fold or
-      unfold the block starting at the given line. A range-finder is a
-      language-specific function that also takes an instance and a
-      line number, and returns an end line for the block, or null if
-      no block is started on that line. This file
-      provides <code>CodeMirror.braceRangeFinder</code>, which finds
-      blocks in brace languages (JavaScript, C, Java,
-      etc), <code>CodeMirror.indentRangeFinder</code>, for languages
-      where indentation determines block structure (Python, Haskell),
-      and <code>CodeMirror.tagRangeFinder</code>, for XML-style
-      languages.</dd>
-      <dt id="util_runmode"><a href="../lib/util/runmode.js"><code>runmode.js</code></a></dt>
-      <dd>Can be used to run a CodeMirror mode over text without
-      actually opening an editor instance.
-      See <a href="../demo/runmode.html">the demo</a> for an
-      example.</dd>
-      <dt id="util_overlay"><a href="../lib/util/overlay.js"><code>overlay.js</code></a></dt>
-      <dd>Mode combinator that can be used to extend a mode with an
-      'overlay' — a secondary mode is run over the stream, along with
-      the base mode, and can color specific pieces of text without
-      interfering with the base mode.
-      Defines <code>CodeMirror.overlayMode</code>, which is used to
-      create such a mode. See <a href="../demo/mustache.html">this
-      demo</a> for a detailed example.</dd>
-      <dt id="util_multiplex"><a href="../lib/util/multiplex.js"><code>multiplex.js</code></a></dt>
-      <dd>Mode combinator that can be used to easily 'multiplex'
-      between several modes.
-      Defines <code>CodeMirror.multiplexingMode</code> which, when
-      given as first argument a mode object, and as other arguments
-      any number of <code>{open, close, mode [, delimStyle]}</code>
-      objects, will return a mode object that starts parsing using the
-      mode passed as first argument, but will switch to another mode
-      as soon as it encounters a string that occurs in one of
-      the <code>open</code> fields of the passed objects. When in a
-      sub-mode, it will go back to the top mode again when
-      the <code>close</code> string is encountered.
-      When <code>delimStyle</code> is specified, it will be the token
-      style returned for the delimiter tokens. The outer mode will not
-      see the content between the delimiters.
-      See <a href="../demo/multiplex.html">this demo</a> for an
-      example.</dd>
-      <dt id="util_simple-hint"><a href="../lib/util/simple-hint.js"><code>simple-hint.js</code></a></dt>
-      <dd>Provides a framework for showing autocompletion hints.
-      Defines <code>CodeMirror.simpleHint</code>, which takes a
-      CodeMirror instance and a hinting function, and pops up a widget
-      that allows the user to select a completion. Hinting functions
-      are function that take an editor instance, and return
-      a <code>{list, from, to}</code> object, where <code>list</code>
-      is an array of strings (the completions), and <code>from</code>
-      and <code>to</code> give the start and end of the token that is
-      being completed. Depends
-      on <code>lib/util/simple-hint.css</code>.</dd>
-      <dt id="util_javascript-hint"><a href="../lib/util/javascript-hint.js"><code>javascript-hint.js</code></a></dt>
-      <dd>Defines <code>CodeMirror.javascriptHint</code>
-      and <code>CodeMirror.coffeescriptHint</code>, which are simple
-      hinting functions for the JavaScript and CoffeeScript
-      modes.</dd>
-      <dt id="util_match-highlighter"><a href="../lib/util/match-highlighter.js"><code>match-highlighter.js</code></a></dt>
-      <dd>Adds a <code>matchHighlight</code> method to CodeMirror
-      instances that can be called (typically from
-      a <a href="#option_onCursorActivity"><code>onCursorActivity</code></a>
-      handler) to highlight all instances of a currently selected word
-      with the a classname given as a first argument to the method.
-      Depends on
-      the <a href="#util_searchcursor"><code>searchcursor</code></a>
-      add-on. Demo <a href="../demo/matchhighlighter.html">here</a>.</dd>
-      <dt id="util_formatting"><a href="../lib/util/formatting.js"><code>formatting.js</code></a></dt>
-      <dd>Adds <code>commentRange</code>, <code>autoIndentRange</code>,
-      and <code>autoFormatRange</code> methods that, respectively,
-      comment (or uncomment), indent, or format (add line breaks) a
-      range of code. <a href="../demo/formatting.html">Demo here.</a></dd>
-      <dt id="util_closetag"><a href="../lib/util/closetag.js"><code>closetag.js</code></a></dt>
-      <dd>Provides utility functions for adding automatic tag closing
-      to XML modes. See
-      the <a href="../demo/closetag.html">demo</a>.</dd>
-      <dt id="util_loadmode"><a href="../lib/util/loadmode.js"><code>loadmode.js</code></a></dt>
-      <dd>Defines a <code>CodeMirror.requireMode(modename,
-      callback)</code> function that will try to load a given mode and
-      call the callback when it succeeded. You'll have to
-      set <code>CodeMirror.modeURL</code> to a string that mode paths
-      can be constructed from, for
-      example <code>"mode/%N/%N.js"</code>—the <code>%N</code>'s will
-      be replaced with the mode name. Also
-      defines <code>CodeMirror.autoLoadMode(instance, mode)</code>,
-      which will ensure the given mode is loaded and cause the given
-      editor instance to refresh its mode when the loading
-      succeeded. See the <a href="../demo/loadmode.html">demo</a>.</dd>
-    </dl>
-    <h2 id="modeapi">Writing CodeMirror Modes</h2>
-    <p>Modes typically consist of a single JavaScript file. This file
-    defines, in the simplest case, a lexer (tokenizer) for your
-    language—a function that takes a character stream as input,
-    advances it past a token, and returns a style for that token. More
-    advanced modes can also handle indentation for the language.</p>
-    <p id="defineMode">The mode script should
-    call <code>CodeMirror.defineMode</code> to register itself with
-    CodeMirror. This function takes two arguments. The first should be
-    the name of the mode, for which you should use a lowercase string,
-    preferably one that is also the name of the files that define the
-    mode (i.e. <code>"xml"</code> is defined <code>xml.js</code>). The
-    second argument should be a function that, given a CodeMirror
-    configuration object (the thing passed to
-    the <code>CodeMirror</code> function) and an optional mode
-    configuration object (as in
-    the <a href="#option_mode"><code>mode</code></a> option), returns
-    a mode object.</p>
-    <p>Typically, you should use this second argument
-    to <code>defineMode</code> as your module scope function (modes
-    should not leak anything into the global scope!), i.e. write your
-    whole mode inside this function.</p>
-    <p>The main responsibility of a mode script is <em>parsing</em>
-    the content of the editor. Depending on the language and the
-    amount of functionality desired, this can be done in really easy
-    or extremely complicated ways. Some parsers can be stateless,
-    meaning that they look at one element (<em>token</em>) of the code
-    at a time, with no memory of what came before. Most, however, will
-    need to remember something. This is done by using a <em>state
-    object</em>, which is an object that is always passed when
-    reading a token, and which can be mutated by the tokenizer.</p>
-    <p id="startState">Modes that use a state must define
-    a <code>startState</code> method on their mode object. This is a
-    function of no arguments that produces a state object to be used
-    at the start of a document.</p>
-    <p id="token">The most important part of a mode object is
-    its <code>token(stream, state)</code> method. All modes must
-    define this method. It should read one token from the stream it is
-    given as an argument, optionally update its state, and return a
-    style string, or <code>null</code> for tokens that do not have to
-    be styled. For your styles, you can either use the 'standard' ones
-    defined in the themes (without the <code>cm-</code> prefix), or
-    define your own and have people include a custom CSS file for your
-    mode.<p>
-    <p id="StringStream">The stream object encapsulates a line of code
-    (tokens may never span lines) and our current position in that
-    line. It has the following API:</p>
-    <dl>
-      <dt><code>eol() → boolean</code></dt>
-      <dd>Returns true only if the stream is at the end of the
-      line.</dd>
-      <dt><code>sol() → boolean</code></dt>
-      <dd>Returns true only if the stream is at the start of the
-      line.</dd>
-      <dt><code>peek() → character</code></dt>
-      <dd>Returns the next character in the stream without advancing
-      it. Will return an empty string at the end of the line.</dd>
-      <dt><code>next() → character</code></dt>
-      <dd>Returns the next character in the stream and advances it.
-      Also returns <code>undefined</code> when no more characters are
-      available.</dd>
-      <dt><code>eat(match) → character</code></dt>
-      <dd><code>match</code> can be a character, a regular expression,
-      or a function that takes a character and returns a boolean. If
-      the next character in the stream 'matches' the given argument,
-      it is consumed and returned. Otherwise, <code>undefined</code>
-      is returned.</dd>
-      <dt><code>eatWhile(match) → boolean</code></dt>
-      <dd>Repeatedly calls <code>eat</code> with the given argument,
-      until it fails. Returns true if any characters were eaten.</dd>
-      <dt><code>eatSpace() → boolean</code></dt>
-      <dd>Shortcut for <code>eatWhile</code> when matching
-      white-space.</dd>
-      <dt><code>skipToEnd()</code></dt>
-      <dd>Moves the position to the end of the line.</dd>
-      <dt><code>skipTo(ch) → boolean</code></dt>
-      <dd>Skips to the next occurrence of the given character, if
-      found on the current line (doesn't advance the stream if the
-      character does not occur on the line). Returns true if the
-      character was found.</dd>
-      <dt><code>match(pattern, consume, caseFold) → boolean</code></dt>
-      <dd>Act like a
-      multi-character <code>eat</code>—if <code>consume</code> is true
-      or not given—or a look-ahead that doesn't update the stream
-      position—if it is false. <code>pattern</code> can be either a
-      string or a regular expression starting with <code>^</code>.
-      When it is a string, <code>caseFold</code> can be set to true to
-      make the match case-insensitive. When successfully matching a
-      regular expression, the returned value will be the array
-      returned by <code>match</code>, in case you need to extract
-      matched groups.</dd>
-      <dt><code>backUp(n)</code></dt>
-      <dd>Backs up the stream <code>n</code> characters. Backing it up
-      further than the start of the current token will cause things to
-      break, so be careful.</dd>
-      <dt><code>column() → integer</code></dt>
-      <dd>Returns the column (taking into account tabs) at which the
-      current token starts. Can be used to find out whether a token
-      starts a new line.</dd>
-      <dt><code>indentation() → integer</code></dt>
-      <dd>Tells you how far the current line has been indented, in
-      spaces. Corrects for tab characters.</dd>
-      <dt><code>current() → string</code></dt>
-      <dd>Get the string between the start of the current token and
-      the current stream position.</dd>
-    </dl>
-    <p id="blankLine">By default, blank lines are simply skipped when
-    tokenizing a document. For languages that have significant blank
-    lines, you can define a <code>blankLine(state)</code> method on
-    your mode that will get called whenever a blank line is passed
-    over, so that it can update the parser state.</p>
-    <p id="copyState">Because state object are mutated, and CodeMirror
-    needs to keep valid versions of a state around so that it can
-    restart a parse at any line, copies must be made of state objects.
-    The default algorithm used is that a new state object is created,
-    which gets all the properties of the old object. Any properties
-    which hold arrays get a copy of these arrays (since arrays tend to
-    be used as mutable stacks). When this is not correct, for example
-    because a mode mutates non-array properties of its state object, a
-    mode object should define a <code>copyState</code> method,
-    which is given a state and should return a safe copy of that
-    state.</p>
-    <p id="indent">If you want your mode to provide smart indentation
-    (through the <a href="#indentLine"><code>indentLine</code></a>
-    method and the <code>indentAuto</code>
-    and <code>newlineAndIndent</code> commands, which keys can be
-    <a href="#option_extraKeys">bound</a> to), you must define
-    an <code>indent(state, textAfter)</code> method on your mode
-    object.</p>
-    <p>The indentation method should inspect the given state object,
-    and optionally the <code>textAfter</code> string, which contains
-    the text on the line that is being indented, and return an
-    integer, the amount of spaces to indent. It should usually take
-    the <a href="#option_indentUnit"><code>indentUnit</code></a>
-    option into account.</p>
-    <p id="electricChars">Finally, a mode may define
-    an <code>electricChars</code> property, which should hold a string
-    containing all the characters that should trigger the behaviour
-    described for
-    the <a href="#option_electricChars"><code>electricChars</code></a>
-    option.</p>
-    <p>So, to summarize, a mode <em>must</em> provide
-    a <code>token</code> method, and it <em>may</em>
-    provide <code>startState</code>, <code>copyState</code>,
-    <code>compareStates</code>, and <code>indent</code> methods. For
-    an example of a trivial mode, see
-    the <a href="../mode/diff/diff.js">diff mode</a>, for a more involved
-    example, see the <a href="../mode/clike/clike.js">C-like
-    mode</a>.</p>
-    <p>Sometimes, it is useful for modes to <em>nest</em>—to have one
-    mode delegate work to another mode. An example of this kind of
-    mode is the <a href="../mode/htmlmixed/htmlmixed.js">mixed-mode HTML
-    mode</a>. To implement such nesting, it is usually necessary to
-    create mode objects and copy states yourself. To create a mode
-    object, there are <code>CodeMirror.getMode(options,
-    parserConfig)</code>, where the first argument is a configuration
-    object as passed to the mode constructor function, and the second
-    argument is a mode specification as in
-    the <a href="#option_mode"><code>mode</code></a> option. To copy a
-    state object, call <code>CodeMirror.copyState(mode, state)</code>,
-    where <code>mode</code> is the mode that created the given
-    state.</p>
-    <p id="innerMode">In a nested mode, it is recommended to add an
-    extra methods, <code>innerMode</code> which, given a state object,
-    returns a <code>{state, mode}</code> object with the inner mode
-    and its state for the current position. These are used by utility
-    scripts such as the <a href="#util_formatting">autoformatter</a>
-    and the <a href="#util_closetag">tag closer</a> to get context
-    information. Use the <code>CodeMirror.innerMode</code> helper
-    function to, starting from a mode and a state, recursively walk
-    down to the innermost mode and state.</p>
-    <p>To make indentation work properly in a nested parser, it is
-    advisable to give the <code>startState</code> method of modes that
-    are intended to be nested an optional argument that provides the
-    base indentation for the block of code. The JavaScript and CSS
-    parser do this, for example, to allow JavaScript and CSS code
-    inside the mixed-mode HTML mode to be properly indented.</p>
-    <p>Finally, it is possible to associate your mode, or a certain
-    configuration of your mode, with
-    a <a href="http://en.wikipedia.org/wiki/MIME">MIME</a> type. For
-    example, the JavaScript mode associates itself
-    with <code>text/javascript</code>, and its JSON variant
-    with <code>application/json</code>. To do this,
-    call <code>CodeMirror.defineMIME(mime, modeSpec)</code>,
-    where <code>modeSpec</code> can be a string or object specifying a
-    mode, as in the <a href="#option_mode"><code>mode</code></a>
-    option.</p>
-    <p id="extendMode">Sometimes, it is useful to add or override mode
-    object properties from external code.
-    The <code>CodeMirror.extendMode</code> can be used to add
-    properties to mode objects produced for a specific mode. Its first
-    argument is the name of the mode, its second an object that
-    specifies the properties that should be added. This is mostly
-    useful to add utilities that can later be looked
-    up <a href="#getMode"><code>getMode</code></a>.</p>
-</div><div class="rightsmall blk">
-    <h2>Contents</h2>
-    <ul>
-      <li><a href="#overview">Overview</a></li>
-      <li><a href="#usage">Basic Usage</a></li>
-      <li><a href="#config">Configuration</a></li>
-      <li><a href="#keymaps">Keymaps</a></li>
-      <li><a href="#styling">Customized Styling</a></li>
-      <li><a href="#api">Programming API</a></li>
-      <li><a href="#addons">Add-ons</a></li>
-      <li><a href="#modeapi">Writing CodeMirror Modes</a></li>
-    </ul>
-</div></div>
-<div style="height: 2em">&nbsp;</div>
-  </body>
-</html>