index.html 4.1 KB

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