5 <title>CodeMirror: JavaScript mode</title>
6 <link rel="stylesheet" href="../../lib/codemirror.css">
7 <script src="../../lib/codemirror.js"></script>
8 <script src="../../addon/edit/matchbrackets.js"></script>
9 <script src="../../addon/edit/continuecomment.js"></script>
10 <script src="../../addon/comment/comment.js"></script>
11 <script src="javascript.js"></script>
12 <link rel="stylesheet" href="../../doc/docs.css">
13 <style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
16 <h1>CodeMirror: JavaScript mode</h1>
18 <div><textarea id="code" name="code">
19 // Demo code (the actual new parser character stream implementation)
21 function StringStream(string) {
26 StringStream.prototype = {
27 done: function() {return this.pos >= this.string.length;},
28 peek: function() {return this.string.charAt(this.pos);},
30 if (this.pos < this.string.length)
31 return this.string.charAt(this.pos++);
33 eat: function(match) {
34 var ch = this.string.charAt(this.pos);
35 if (typeof match == "string") var ok = ch == match;
36 else var ok = ch && match.test ? match.test(ch) : match(ch);
37 if (ok) {this.pos++; return ch;}
39 eatWhile: function(match) {
41 while (this.eat(match));
42 if (this.pos > start) return this.string.slice(start, this.pos);
44 backUp: function(n) {this.pos -= n;},
45 column: function() {return this.pos;},
46 eatSpace: function() {
48 while (/\s/.test(this.string.charAt(this.pos))) this.pos++;
49 return this.pos - start;
51 match: function(pattern, consume, caseInsensitive) {
52 if (typeof pattern == "string") {
53 function cased(str) {return caseInsensitive ? str.toLowerCase() : str;}
54 if (cased(this.string).indexOf(cased(pattern), this.pos) == this.pos) {
55 if (consume !== false) this.pos += str.length;
60 var match = this.string.slice(this.pos).match(pattern);
61 if (match && consume !== false) this.pos += match[0].length;
69 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
72 continueComments: "Enter",
73 extraKeys: {"Ctrl-Q": "toggleComment"}
78 JavaScript mode supports a two configuration
81 <li><code>json</code> which will set the mode to expect JSON
82 data rather than a JavaScript program.</li>
83 <li><code>typescript</code> which will activate additional
84 syntax highlighting and some other things for TypeScript code
85 (<a href="typescript.html">demo</a>).</li>
86 <li><code>statementIndent</code> which (given a number) will
87 determine the amount of indentation to use for statements
88 continued on a new line.</li>
92 <p><strong>MIME types defined:</strong> <code>text/javascript</code>, <code>application/json</code>, <code>text/typescript</code>, <code>application/typescript</code>.</p>