third-party/codemirror-3.15/demo/mustache.html

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