Mercurial
comparison .cms/lib/codemirror/demo/simplemode.html @ 0:78edf6b517a0 draft
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<string> | 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<string></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> |