mustache.html 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <!doctype html>
  2. <title>CodeMirror: Overlay Parser Demo</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/mode/overlay.js"></script>
  8. <script src="../mode/xml/xml.js"></script>
  9. <style type="text/css">
  10. .CodeMirror {border: 1px solid black;}
  11. .cm-mustache {color: #0ca;}
  12. </style>
  13. <div id=nav>
  14. <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
  15. <ul>
  16. <li><a href="../index.html">Home</a>
  17. <li><a href="../doc/manual.html">Manual</a>
  18. <li><a href="https://github.com/marijnh/codemirror">Code</a>
  19. </ul>
  20. <ul>
  21. <li><a class=active href="#">Overlay Parser</a>
  22. </ul>
  23. </div>
  24. <article>
  25. <h2>Overlay Parser Demo</h2>
  26. <form><textarea id="code" name="code">
  27. <html>
  28. <body>
  29. <h1>{{title}}</h1>
  30. <p>These are links to {{things}}:</p>
  31. <ul>{{#links}}
  32. <li><a href="{{url}}">{{text}}</a></li>
  33. {{/links}}</ul>
  34. </body>
  35. </html>
  36. </textarea></form>
  37. <script>
  38. CodeMirror.defineMode("mustache", function(config, parserConfig) {
  39. var mustacheOverlay = {
  40. token: function(stream, state) {
  41. var ch;
  42. if (stream.match("{{")) {
  43. while ((ch = stream.next()) != null)
  44. if (ch == "}" && stream.next() == "}") break;
  45. stream.eat("}");
  46. return "mustache";
  47. }
  48. while (stream.next() != null && !stream.match("{{", false)) {}
  49. return null;
  50. }
  51. };
  52. return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "text/html"), mustacheOverlay);
  53. });
  54. var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "mustache"});
  55. </script>
  56. <p>Demonstration of a mode that parses HTML, highlighting
  57. the <a href="http://mustache.github.com/">Mustache</a> templating
  58. directives inside of it by using the code
  59. in <a href="../addon/mode/overlay.js"><code>overlay.js</code></a>. View
  60. source to see the 15 lines of code needed to accomplish this.</p>
  61. </article>