--- a/js/flotr2/examples/lib/codemirror/demo/mustache.html +++ b/js/flotr2/examples/lib/codemirror/demo/mustache.html @@ -1,1 +1,57 @@ +<!doctype html> +<html> + <head> + <title>CodeMirror: Overlay Parser Demo</title> + <link rel="stylesheet" href="../lib/codemirror.css"> + <script src="../lib/codemirror.js"></script> + <script src="../lib/util/overlay.js"></script> + <script src="../mode/xml/xml.js"></script> + <link rel="stylesheet" href="../doc/docs.css"> + <style type="text/css"> + .CodeMirror {border: 1px solid black;} + .cm-mustache {color: #0ca;} + </style> + </head> + <body> + <h1>CodeMirror: Overlay Parser Demo</h1> + + <form><textarea id="code" name="code"> +<html> + <body> + <h1>{{title}}</h1> + <p>These are links to {{things}}:</p> + <ul>{{#links}} + <li><a href="{{url}}">{{text}}</a></li> + {{/links}}</ul> + </body> +</html> +</textarea></form> + + <script> +CodeMirror.defineMode("mustache", function(config, parserConfig) { + var mustacheOverlay = { + token: function(stream, state) { + if (stream.match("{{")) { + while ((ch = stream.next()) != null) + if (ch == "}" && stream.next() == "}") break; + return "mustache"; + } + while (stream.next() != null && !stream.match("{{", false)) {} + return null; + } + }; + return CodeMirror.overlayParser(CodeMirror.getMode(config, parserConfig.backdrop || "text/html"), mustacheOverlay); +}); +var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "mustache"}); +</script> + + <p>Demonstration of a mode that parses HTML, highlighting + the <a href="http://mustache.github.com/">Mustache</a> templating + directives inside of it by using the code + in <a href="../lib/util/overlay.js"><code>overlay.js</code></a>. View + source to see the 15 lines of code needed to accomplish this.</p> + + </body> +</html> +