Mercurial

comparison .cms/lib/codemirror/demo/simplemode.html @ 0:78edf6b517a0 draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
24.10
author Coffee CMS <info@coffee-cms.ru>
date Fri, 11 Oct 2024 22:40:23 +0000
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:78edf6b517a0
1 <!doctype html>
2
3 <title>CodeMirror: Simple Mode Demo</title>
4 <meta charset="utf-8"/>
5 <link rel=stylesheet href="../doc/docs.css">
6
7 <link rel="stylesheet" href="../lib/codemirror.css">
8 <script src="../lib/codemirror.js"></script>
9 <script src="../addon/mode/simple.js"></script>
10 <script src="../mode/xml/xml.js"></script>
11 <style>
12 .CodeMirror {border: 1px solid silver; margin-bottom: 1em; }
13 dt { text-indent: -2em; padding-left: 2em; margin-top: 1em; }
14 dd { margin-left: 1.5em; margin-bottom: 1em; }
15 dt {margin-top: 1em;}
16 </style>
17
18 <div id=nav>
19 <a href="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
20
21 <ul>
22 <li><a href="../index.html">Home</a>
23 <li><a href="../doc/manual.html">Manual</a>
24 <li><a href="https://github.com/codemirror/codemirror5">Code</a>
25 </ul>
26 <ul>
27 <li><a class=active href="#">Simple Mode</a>
28 </ul>
29 </div>
30
31 <article>
32 <h2>Simple Mode Demo</h2>
33
34 <p>The <a href="../addon/mode/simple.js"><code>mode/simple</code></a>
35 addon allows CodeMirror modes to be specified using a relatively simple
36 declarative format. This format is not as powerful as writing code
37 directly against the <a href="../doc/manual.html#modeapi">mode
38 interface</a>, but is a lot easier to get started with, and
39 sufficiently expressive for many simple language modes.</p>
40
41 <p>This interface is still in flux. It is unlikely to be scrapped or
42 overhauled completely, so do start writing code against it, but
43 details might change as it stabilizes, and you might have to tweak
44 your code when upgrading.</p>
45
46 <p>Simple modes (loosely based on
47 the <a href="https://github.com/mozilla/skywriter/wiki/Common-JavaScript-Syntax-Highlighting-Specification">Common
48 JavaScript Syntax Highlighting Specification</a>, which never took
49 off), are state machines, where each state has a number of rules that
50 match tokens. A rule describes a type of token that may occur in the
51 current state, and possibly a transition to another state caused by
52 that token.</p>
53
54 <p>The <code>CodeMirror.defineSimpleMode(name, states)</code> method
55 takes a mode name and an object that describes the mode's states. The
56 editor below shows an example of such a mode (and is itself
57 highlighted by the mode shown in it).</p>
58
59 <div id="code"></div>
60
61 <p>Each state is an array of rules. A rule may have the following properties:</p>
62
63 <dl>
64 <dt><code><strong>regex</strong>: string | RegExp</code></dt>
65 <dd>The regular expression that matches the token. May be a string
66 or a regex object. When a regex, the <code>ignoreCase</code> flag
67 will be taken into account when matching the token. This regex
68 has to capture groups when the <code>token</code> property is
69 an array. If it captures groups, it must capture <em>all</em> of the string
70 (since JS provides no way to find out where a group matched).
71 Currently negative lookbehind assertion for regex is not supported, regardless of browser support.</dd>
72 <dt><code><strong>token</strong></code>: string | array&lt;string&gt; | null</dt>
73 <dd>An optional token style. Multiple styles can be specified by
74 separating them with dots or spaces. When this property holds an array of token styles,
75 the <code>regex</code> for this rule must capture a group for each array item.
76 </dd>
77 <dt><code><strong>sol</strong></code>: boolean</dt>
78 <dd>When true, this token will only match at the start of the line.
79 (The <code>^</code> regexp marker doesn't work as you'd expect in
80 this context because of limitations in JavaScript's RegExp
81 API.)</dd>
82 <dt><code><strong>next</strong>: string</code></dt>
83 <dd>When a <code>next</code> property is present, the mode will
84 transfer to the state named by the property when the token is
85 encountered.</dd>
86 <dt><code><strong>push</strong>: string</code></dt>
87 <dd>Like <code>next</code>, but instead replacing the current state
88 by the new state, the current state is kept on a stack, and can be
89 returned to with the <code>pop</code> directive.</dd>
90 <dt><code><strong>pop</strong>: bool</code></dt>
91 <dd>When true, and there is another state on the state stack, will
92 cause the mode to pop that state off the stack and transition to
93 it.</dd>
94 <dt><code><strong>mode</strong>: {spec, end, persistent}</code></dt>
95 <dd>Can be used to embed another mode inside a mode. When present,
96 must hold an object with a <code>spec</code> property that describes
97 the embedded mode, and an optional <code>end</code> end property
98 that specifies the regexp that will end the extent of the mode. When
99 a <code>persistent</code> property is set (and true), the nested
100 mode's state will be preserved between occurrences of the mode.</dd>
101 <dt><code><strong>indent</strong>: bool</code></dt>
102 <dd>When true, this token changes the indentation to be one unit
103 more than the current line's indentation.</dd>
104 <dt><code><strong>dedent</strong>: bool</code></dt>
105 <dd>When true, this token will pop one scope off the indentation
106 stack.</dd>
107 <dt><code><strong>dedentIfLineStart</strong>: bool</code></dt>
108 <dd>If a token has its <code>dedent</code> property set, it will, by
109 default, cause lines where it appears at the start to be dedented.
110 Set this property to false to prevent that behavior.</dd>
111 </dl>
112
113 <p>The <code>meta</code> property of the states object is special, and
114 will not be interpreted as a state. Instead, properties set on it will
115 be set on the mode, which is useful for properties
116 like <a href="../doc/manual.html#addon_comment"><code>lineComment</code></a>,
117 which sets the comment style for a mode. The simple mode addon also
118 recognizes a few such properties:</p>
119
120 <dl>
121 <dt><code><strong>dontIndentStates</strong>: array&lt;string&gt;</code></dt>
122 <dd>An array of states in which the mode's auto-indentation should
123 not take effect. Usually used for multi-line comment and string
124 states.</dd>
125 </dl>
126
127 <script id="modecode">/* Example definition of a simple mode that understands a subset of
128 * JavaScript:
129 */
130
131 CodeMirror.defineSimpleMode("simplemode", {
132 // The start state contains the rules that are initially used
133 start: [
134 // The regex matches the token, the token property contains the type
135 {regex: /"(?:[^\\]|\\.)*?(?:"|$)/, token: "string"},
136 // You can match multiple tokens at once. Note that the captured
137 // groups must span the whole string in this case
138 {regex: /(function)(\s+)([a-z$][\w$]*)/,
139 token: ["keyword", null, "variable-2"]},
140 // Rules are matched in the order in which they appear, so there is
141 // no ambiguity between this one and the one above
142 {regex: /(?:function|var|return|if|for|while|else|do|this)\b/,
143 token: "keyword"},
144 {regex: /true|false|null|undefined/, token: "atom"},
145 {regex: /0x[a-f\d]+|[-+]?(?:\.\d+|\d+\.?\d*)(?:e[-+]?\d+)?/i,
146 token: "number"},
147 {regex: /\/\/.*/, token: "comment"},
148 {regex: /\/(?:[^\\]|\\.)*?\//, token: "variable-3"},
149 // A next property will cause the mode to move to a different state
150 {regex: /\/\*/, token: "comment", next: "comment"},
151 {regex: /[-+\/*=<>!]+/, token: "operator"},
152 // indent and dedent properties guide autoindentation
153 {regex: /[\{\[\(]/, indent: true},
154 {regex: /[\}\]\)]/, dedent: true},
155 {regex: /[a-z$][\w$]*/, token: "variable"},
156 // You can embed other modes with the mode property. This rule
157 // causes all code between << and >> to be highlighted with the XML
158 // mode.
159 {regex: /<</, token: "meta", mode: {spec: "xml", end: />>/}}
160 ],
161 // The multi-line comment state.
162 comment: [
163 {regex: /.*?\*\//, token: "comment", next: "start"},
164 {regex: /.*/, token: "comment"}
165 ],
166 // The meta property contains global information about the mode. It
167 // can contain properties like lineComment, which are supported by
168 // all modes, and also directives like dontIndentStates, which are
169 // specific to simple modes.
170 meta: {
171 dontIndentStates: ["comment"],
172 lineComment: "//"
173 }
174 });
175 </script>
176
177 <script>
178 var sc = document.getElementById("modecode");
179 var code = document.getElementById("code");
180 var editor = CodeMirror(code, {
181 value: (sc.textContent || sc.innerText || sc.innerHTML),
182 mode: "simplemode"
183 });
184 </script>
185
186 </article>