Created
October 21, 2014 23:21
-
-
Save randyburden/26b8c794cb972817426e to your computer and use it in GitHub Desktop.
CodeMirror Custom Syntax Highlighter for highlighting double curly brace wrapped text aka Mustache / Handlebars
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>CurlyBraceWrappedText Demo</title> | |
| <style type="text/css"> | |
| .CodeMirror {border: 1px solid black;} | |
| .cm-CurlyBraceWrappedText {color: #CC0000; font-weight: bold;} | |
| </style> | |
| <link rel="stylesheet" href="css/codemirror.css"> | |
| <script src="js/codemirror.js"></script> | |
| <script src="js/overlay.js"></script> | |
| </head> | |
| <body> | |
| <div id="MyTextAreaText" style="display:none"> | |
| This is a token {{TokenName}} | |
| This is not a token {{ lkjsldjf | |
| Again, not a token {{lkjsdjf} | |
| But this is a triple mustachioed token {{{Booyah}}} | |
| See spot run. | |
| </div> | |
| <div id="MyTextArea"></div> | |
| <script> | |
| CodeMirror.defineMode("CurlyBraceWrappedText", function(config, parserConfig) { | |
| // Note you must add the following style to get the syntax to highlight: | |
| // .cm-CurlyBraceWrappedText {color: #CC0000; font-weight: bold;} | |
| var curlyBraceWrappedTextOverlay = { | |
| token: function(stream, state) { | |
| var ch; | |
| if (stream.match("{{")) { | |
| while ((ch = stream.next()) != null) | |
| if (ch == "}" && stream.next() == "}"){ | |
| stream.eat("}"); | |
| return "CurlyBraceWrappedText"; | |
| } | |
| } | |
| while (stream.next() != null && !stream.match("{{", false)) {} | |
| return null; | |
| } | |
| }; | |
| return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop ), curlyBraceWrappedTextOverlay); | |
| }); | |
| window.onload = function() { | |
| var myTextArea = document.getElementById("MyTextArea"); | |
| editor = CodeMirror(myTextArea, { | |
| mode: "CurlyBraceWrappedText", | |
| value: document.getElementById("MyTextAreaText").innerHTML | |
| }); | |
| }; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment