openrat-cms

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

mustache.html (2096B)

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