1
0

mustache.html 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>CodeMirror 2: Overlay Parser Demo</title>
  5. <link rel="stylesheet" href="../lib/codemirror.css">
  6. <script src="../lib/codemirror.js"></script>
  7. <script src="../lib/overlay.js"></script>
  8. <link rel="stylesheet" href="../theme/default.css">
  9. <script src="../mode/xml/xml.js"></script>
  10. <link rel="stylesheet" href="../css/docs.css">
  11. <style type="text/css">
  12. .CodeMirror {border: 1px solid black;}
  13. .mustache {color: #0ca;}
  14. </style>
  15. </head>
  16. <body>
  17. <h1>CodeMirror 2: 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. if (stream.match("{{")) {
  34. while ((ch = stream.next()) != null)
  35. if (ch == "}" && stream.next() == "}") break;
  36. return "mustache";
  37. }
  38. while (stream.next() != null && !stream.match("{{", false)) {}
  39. return null;
  40. }
  41. };
  42. return CodeMirror.overlayParser(CodeMirror.getMode(config, parserConfig.backdrop || "text/html"), mustacheOverlay);
  43. });
  44. var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "mustache"});
  45. </script>
  46. <p>Demonstration of a mode that parses HTML, highlighting
  47. the <a href="http://mustache.github.com/">Mustache</a> templating
  48. directives inside of it by using the code
  49. in <a href="../lib/overlay.js"><code>overlay.js</code></a>. View
  50. source to see the 15 lines of code needed to accomplish this.</p>
  51. </body>
  52. </html>