| 1 |
<!doctype html> |
| 2 |
|
| 3 |
<title>CodeMirror: JavaScript mode</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/edit/matchbrackets.js"></script> |
| 10 |
<script src="../../addon/comment/continuecomment.js"></script> |
| 11 |
<script src="../../addon/comment/comment.js"></script> |
| 12 |
<script src="javascript.js"></script> |
| 13 |
<style>.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style> |
| 14 |
<div id=nav> |
| 15 |
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png" alt=""></a> |
| 16 |
|
| 17 |
<ul> |
| 18 |
<li><a href="../../index.html">Home</a> |
| 19 |
<li><a href="../../doc/manual.html">Manual</a> |
| 20 |
<li><a href="https://github.com/codemirror/codemirror">Code</a> |
| 21 |
</ul> |
| 22 |
<ul> |
| 23 |
<li><a href="../index.html">Language modes</a> |
| 24 |
<li><a class=active href="#">JavaScript</a> |
| 25 |
</ul> |
| 26 |
</div> |
| 27 |
|
| 28 |
<article> |
| 29 |
<h2>JavaScript mode</h2> |
| 30 |
|
| 31 |
|
| 32 |
<div><textarea id="code" name="code"> |
| 33 |
// Demo code (the actual new parser character stream implementation) |
| 34 |
|
| 35 |
function StringStream(string) { |
| 36 |
this.pos = 0; |
| 37 |
this.string = string; |
| 38 |
} |
| 39 |
|
| 40 |
StringStream.prototype = { |
| 41 |
done: function() {return this.pos >= this.string.length;}, |
| 42 |
peek: function() {return this.string.charAt(this.pos);}, |
| 43 |
next: function() { |
| 44 |
if (this.pos < this.string.length) |
| 45 |
return this.string.charAt(this.pos++); |
| 46 |
}, |
| 47 |
eat: function(match) { |
| 48 |
var ch = this.string.charAt(this.pos); |
| 49 |
if (typeof match == "string") var ok = ch == match; |
| 50 |
else var ok = ch && match.test ? match.test(ch) : match(ch); |
| 51 |
if (ok) {this.pos++; return ch;} |
| 52 |
}, |
| 53 |
eatWhile: function(match) { |
| 54 |
var start = this.pos; |
| 55 |
while (this.eat(match)); |
| 56 |
if (this.pos > start) return this.string.slice(start, this.pos); |
| 57 |
}, |
| 58 |
backUp: function(n) {this.pos -= n;}, |
| 59 |
column: function() {return this.pos;}, |
| 60 |
eatSpace: function() { |
| 61 |
var start = this.pos; |
| 62 |
while (/\s/.test(this.string.charAt(this.pos))) this.pos++; |
| 63 |
return this.pos - start; |
| 64 |
}, |
| 65 |
match: function(pattern, consume, caseInsensitive) { |
| 66 |
if (typeof pattern == "string") { |
| 67 |
function cased(str) {return caseInsensitive ? str.toLowerCase() : str;} |
| 68 |
if (cased(this.string).indexOf(cased(pattern), this.pos) == this.pos) { |
| 69 |
if (consume !== false) this.pos += str.length; |
| 70 |
return true; |
| 71 |
} |
| 72 |
} |
| 73 |
else { |
| 74 |
var match = this.string.slice(this.pos).match(pattern); |
| 75 |
if (match && consume !== false) this.pos += match[0].length; |
| 76 |
return match; |
| 77 |
} |
| 78 |
} |
| 79 |
}; |
| 80 |
</textarea></div> |
| 81 |
|
| 82 |
<script> |
| 83 |
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { |
| 84 |
lineNumbers: true, |
| 85 |
matchBrackets: true, |
| 86 |
continueComments: "Enter", |
| 87 |
extraKeys: {"Ctrl-Q": "toggleComment"} |
| 88 |
}); |
| 89 |
</script> |
| 90 |
|
| 91 |
<p> |
| 92 |
JavaScript mode supports several configuration options: |
| 93 |
<ul> |
| 94 |
<li><code>json</code> which will set the mode to expect JSON |
| 95 |
data rather than a JavaScript program.</li> |
| 96 |
<li><code>jsonld</code> which will set the mode to expect |
| 97 |
<a href="http://json-ld.org">JSON-LD</a> linked data rather |
| 98 |
than a JavaScript program (<a href="json-ld.html">demo</a>).</li> |
| 99 |
<li><code>typescript</code> which will activate additional |
| 100 |
syntax highlighting and some other things for TypeScript code |
| 101 |
(<a href="typescript.html">demo</a>).</li> |
| 102 |
<li><code>statementIndent</code> which (given a number) will |
| 103 |
determine the amount of indentation to use for statements |
| 104 |
continued on a new line.</li> |
| 105 |
<li><code>wordCharacters</code>, a regexp that indicates which |
| 106 |
characters should be considered part of an identifier. |
| 107 |
Defaults to <code>/[\w$]/</code>, which does not handle |
| 108 |
non-ASCII identifiers. Can be set to something more elaborate |
| 109 |
to improve Unicode support.</li> |
| 110 |
</ul> |
| 111 |
</p> |
| 112 |
|
| 113 |
<p><strong>MIME types defined:</strong> <code>text/javascript</code>, <code>application/json</code>, <code>application/ld+json</code>, <code>text/typescript</code>, <code>application/typescript</code>.</p> |
| 114 |
</article> |
| 115 |
|
