codemirrorがハイライトに便利ですが、twig対応のものがないから、自分で作ってみました。
HTML mixed modeを使う前提です。

overlay.jsをinclude

overlay.jsをincludeする

XHTML

<script type="text/javascript" src="js/overlay.js"></script>

1	<script type="text/javascript" src="js/overlay.js"></script>

未検証ですが、これはもしかして要らないかもしりません。

twig.jsを作ってincludeする

jinja2のものを参考にしています。

JavaScript

CodeMirror.defineMode("twig", function(config, parserConfig) { var keywords = ["block", "endblock", "for", "endfor", "in", "true", "false", "loop", "none", "self", "super", "if", "endif", "as", "not", "and", "else", "import", "with", "without", "context", "include", "set", "asset", "path"]; keywords = new RegExp("^((" + keywords.join(")|(") + "))\\b"); function tokenBase (stream, state) { var ch = stream.next(); if (ch == "{") { if (ch = stream.eat(/\{|%|#/)) { stream.eat("-"); state.tokenize = inTag(ch); return "tag"; } } } function inTag (close) { if (close == "{") { close = "}"; } return function (stream, state) { var ch = stream.next(); if ((ch == close || (ch == "-" && stream.eat(close))) && stream.eat("}")) { state.tokenize = tokenBase; return "tag"; } if (stream.match(keywords)) { return "keyword"; } return close == "#" ? "comment" : "string"; }; } var twigOverlay = { startState: function () { return {tokenize: tokenBase}; }, token: function (stream, state) { return state.tokenize(stream, state); } }; return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "text/html"), twigOverlay); });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

CodeMirror.defineMode("twig", function(config, parserConfig) {     var keywords = ["block", "endblock", "for", "endfor", "in", "true", "false",                     "loop", "none", "self", "super", "if", "endif", "as", "not", "and",                     "else", "import", "with", "without", "context", "include", "set", "asset", "path"];     keywords = new RegExp("^((" + keywords.join(")|(") + "))\\b");       function tokenBase (stream, state) {         var ch = stream.next();         if (ch == "{") {             if (ch = stream.eat(/\{|%|#/)) {                 stream.eat("-");                 state.tokenize = inTag(ch);                 return "tag";             }         }     }     function inTag (close) {         if (close == "{") {             close = "}";         }         return function (stream, state) {             var ch = stream.next();             if ((ch == close || (ch == "-" && stream.eat(close)))                 && stream.eat("}")) {                 state.tokenize = tokenBase;                 return "tag";             }             if (stream.match(keywords)) {                 return "keyword";             }             return close == "#" ? "comment" : "string";         };     }       var twigOverlay = {         startState: function () {           return {tokenize: tokenBase};         },         token: function (stream, state) {           return state.tokenize(stream, state);         } };          return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "text/html"), twigOverlay); });

XHTML

<script type="text/javascript" src="js/twig.js"></script>

1	<script type="text/javascript" src="js/twig.js"></script>

テストエリアにハイライト

JavaScript

var myCodeMirror = CodeMirror.fromTextArea(obj, {mode: "twig", tabMode: "indent", lineNumbers: true,});

1	var myCodeMirror = CodeMirror.fromTextArea(obj, {mode: "twig", tabMode: "indent", lineNumbers: true,});