1
0

mustache.html 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>CodeMirror: Overlay Parser Demo</title>
  6. <link rel="stylesheet" href="../lib/codemirror.css">
  7. <script src="../lib/codemirror.js"></script>
  8. <script src="../addon/mode/overlay.js"></script>
  9. <script src="../mode/xml/xml.js"></script>
  10. <link rel="stylesheet" href="../doc/docs.css">
  11. <style type="text/css">
  12. .CodeMirror {border: 1px solid black;}
  13. .cm-mustache {color: #0ca;}
  14. </style>
  15. </head>
  16. <body>
  17. <h1>CodeMirror: Overlay Parser Demo</h1>
  18. <form><textarea id="code" name="code">
  19. <html>
  20. <body>
  21. <h1>{{title}}</h1>
  22. <p>These are links to {{things}}:</p>
  23. <ul>{{#links}}
  24. <li><a href="{{url}}">{{text}}</a></li>
  25. {{/links}}</ul>
  26. </body>
  27. </html>
  28. </textarea></form>
  29. <script>
  30. CodeMirror.defineMode("mustache", function(config, parserConfig) {
  31. var mustacheOverlay = {
  32. token: function(stream, state) {
  33. var ch;
  34. if (stream.match("{{")) {
  35. while ((ch = stream.next()) != null)
  36. if (ch == "}" && stream.next() == "}") break;
  37. stream.eat("}");
  38. return "mustache";
  39. }
  40. while (stream.next() != null && !stream.match("{{", false)) {}
  41. return null;
  42. }
  43. };
  44. return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "text/html"), mustacheOverlay);
  45. });
  46. var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "mustache"});
  47. </script>
  48. <p>Demonstration of a mode that parses HTML, highlighting
  49. the <a href="http://mustache.github.com/">Mustache</a> templating
  50. directives inside of it by using the code
  51. in <a href="../addon/mode/overlay.js"><code>overlay.js</code></a>. View
  52. source to see the 15 lines of code needed to accomplish this.</p>
  53. </body>
  54. </html>