123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185 |
- <!doctype html>
- <title>CodeMirror: Simple Mode Demo</title>
- <meta charset="utf-8"/>
- <link rel=stylesheet href="../doc/docs.css">
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../addon/mode/simple.js"></script>
- <script src="../mode/xml/xml.js"></script>
- <style type="text/css">
- .CodeMirror {border: 1px solid silver; margin-bottom: 1em; }
- dt { text-indent: -2em; padding-left: 2em; margin-top: 1em; }
- dd { margin-left: 1.5em; margin-bottom: 1em; }
- dt {margin-top: 1em;}
- </style>
- <div id=nav>
- <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
- <ul>
- <li><a href="../index.html">Home</a>
- <li><a href="../doc/manual.html">Manual</a>
- <li><a href="https://github.com/codemirror/codemirror">Code</a>
- </ul>
- <ul>
- <li><a class=active href="#">Simple Mode</a>
- </ul>
- </div>
- <article>
- <h2>Simple Mode Demo</h2>
- <p>The <a href="../addon/mode/simple.js"><code>mode/simple</code></a>
- addon allows CodeMirror modes to be specified using a relatively simple
- declarative format. This format is not as powerful as writing code
- directly against the <a href="../doc/manual.html#modeapi">mode
- interface</a>, but is a lot easier to get started with, and
- sufficiently expressive for many simple language modes.</p>
- <p>This interface is still in flux. It is unlikely to be scrapped or
- overhauled completely, so do start writing code against it, but
- details might change as it stabilizes, and you might have to tweak
- your code when upgrading.</p>
- <p>Simple modes (loosely based on
- the <a href="https://github.com/mozilla/skywriter/wiki/Common-JavaScript-Syntax-Highlighting-Specification">Common
- JavaScript Syntax Highlighting Specification</a>, which never took
- off), are state machines, where each state has a number of rules that
- match tokens. A rule describes a type of token that may occur in the
- current state, and possibly a transition to another state caused by
- that token.</p>
- <p>The <code>CodeMirror.defineSimpleMode(name, states)</code> method
- takes a mode name and an object that describes the mode's states. The
- editor below shows an example of such a mode (and is itself
- highlighted by the mode shown in it).</p>
- <div id="code"></div>
- <p>Each state is an array of rules. A rule may have the following properties:</p>
- <dl>
- <dt><code><strong>regex</strong>: string | RegExp</code></dt>
- <dd>The regular expression that matches the token. May be a string
- or a regex object. When a regex, the <code>ignoreCase</code> flag
- will be taken into account when matching the token. This regex
- has to capture groups when the <code>token</code> property is
- an array. If it captures groups, it must capture <em>all</em> of the string
- (since JS provides no way to find out where a group matched).</dd>
- <dt><code><strong>token</strong></code>: string | array<string> | null</dt>
- <dd>An optional token style. Multiple styles can be specified by
- separating them with dots or spaces. When this property holds an array of token styles,
- the <code>regex</code> for this rule must capture a group for each array item.
- </dd>
- <dt><code><strong>sol</strong></code>: boolean</dt>
- <dd>When true, this token will only match at the start of the line.
- (The <code>^</code> regexp marker doesn't work as you'd expect in
- this context because of limitations in JavaScript's RegExp
- API.)</dd>
- <dt><code><strong>next</strong>: string</code></dt>
- <dd>When a <code>next</code> property is present, the mode will
- transfer to the state named by the property when the token is
- encountered.</dd>
- <dt><code><strong>push</strong>: string</code></dt>
- <dd>Like <code>next</code>, but instead replacing the current state
- by the new state, the current state is kept on a stack, and can be
- returned to with the <code>pop</code> directive.</dd>
- <dt><code><strong>pop</strong>: bool</code></dt>
- <dd>When true, and there is another state on the state stack, will
- cause the mode to pop that state off the stack and transition to
- it.</dd>
- <dt><code><strong>mode</strong>: {spec, end, persistent}</code></dt>
- <dd>Can be used to embed another mode inside a mode. When present,
- must hold an object with a <code>spec</code> property that describes
- the embedded mode, and an optional <code>end</code> end property
- that specifies the regexp that will end the extent of the mode. When
- a <code>persistent</code> property is set (and true), the nested
- mode's state will be preserved between occurrences of the mode.</dd>
- <dt><code><strong>indent</strong>: bool</code></dt>
- <dd>When true, this token changes the indentation to be one unit
- more than the current line's indentation.</dd>
- <dt><code><strong>dedent</strong>: bool</code></dt>
- <dd>When true, this token will pop one scope off the indentation
- stack.</dd>
- <dt><code><strong>dedentIfLineStart</strong>: bool</code></dt>
- <dd>If a token has its <code>dedent</code> property set, it will, by
- default, cause lines where it appears at the start to be dedented.
- Set this property to false to prevent that behavior.</dd>
- </dl>
- <p>The <code>meta</code> property of the states object is special, and
- will not be interpreted as a state. Instead, properties set on it will
- be set on the mode, which is useful for properties
- like <a href="../doc/manual.html#addon_comment"><code>lineComment</code></a>,
- which sets the comment style for a mode. The simple mode addon also
- recognizes a few such properties:</p>
- <dl>
- <dt><code><strong>dontIndentStates</strong>: array<string></code></dt>
- <dd>An array of states in which the mode's auto-indentation should
- not take effect. Usually used for multi-line comment and string
- states.</dd>
- </dl>
- <script id="modecode">/* Example definition of a simple mode that understands a subset of
- * JavaScript:
- */
- CodeMirror.defineSimpleMode("simplemode", {
- // The start state contains the rules that are intially used
- start: [
- // The regex matches the token, the token property contains the type
- {regex: /"(?:[^\\]|\\.)*?(?:"|$)/, token: "string"},
- // You can match multiple tokens at once. Note that the captured
- // groups must span the whole string in this case
- {regex: /(function)(\s+)([a-z$][\w$]*)/,
- token: ["keyword", null, "variable-2"]},
- // Rules are matched in the order in which they appear, so there is
- // no ambiguity between this one and the one above
- {regex: /(?:function|var|return|if|for|while|else|do|this)\b/,
- token: "keyword"},
- {regex: /true|false|null|undefined/, token: "atom"},
- {regex: /0x[a-f\d]+|[-+]?(?:\.\d+|\d+\.?\d*)(?:e[-+]?\d+)?/i,
- token: "number"},
- {regex: /\/\/.*/, token: "comment"},
- {regex: /\/(?:[^\\]|\\.)*?\//, token: "variable-3"},
- // A next property will cause the mode to move to a different state
- {regex: /\/\*/, token: "comment", next: "comment"},
- {regex: /[-+\/*=<>!]+/, token: "operator"},
- // indent and dedent properties guide autoindentation
- {regex: /[\{\[\(]/, indent: true},
- {regex: /[\}\]\)]/, dedent: true},
- {regex: /[a-z$][\w$]*/, token: "variable"},
- // You can embed other modes with the mode property. This rule
- // causes all code between << and >> to be highlighted with the XML
- // mode.
- {regex: /<</, token: "meta", mode: {spec: "xml", end: />>/}}
- ],
- // The multi-line comment state.
- comment: [
- {regex: /.*?\*\//, token: "comment", next: "start"},
- {regex: /.*/, token: "comment"}
- ],
- // The meta property contains global information about the mode. It
- // can contain properties like lineComment, which are supported by
- // all modes, and also directives like dontIndentStates, which are
- // specific to simple modes.
- meta: {
- dontIndentStates: ["comment"],
- lineComment: "//"
- }
- });
- </script>
- <script>
- var sc = document.getElementById("modecode");
- var code = document.getElementById("code");
- var editor = CodeMirror(code, {
- value: (sc.textContent || sc.innerText || sc.innerHTML),
- mode: "simplemode"
- });
- </script>
- </article>
|