index.html 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  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"><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/marijnh/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 a two configuration
  83. options:
  84. <ul>
  85. <li><code>json</code> which will set the mode to expect JSON
  86. data rather than a JavaScript program.</li>
  87. <li><code>typescript</code> which will activate additional
  88. syntax highlighting and some other things for TypeScript code
  89. (<a href="typescript.html">demo</a>).</li>
  90. <li><code>statementIndent</code> which (given a number) will
  91. determine the amount of indentation to use for statements
  92. continued on a new line.</li>
  93. </ul>
  94. </p>
  95. <p><strong>MIME types defined:</strong> <code>text/javascript</code>, <code>application/json</code>, <code>text/typescript</code>, <code>application/typescript</code>.</p>
  96. </article>