Basic Django template syntax highlighting support for the codemirror editor.

README

These two files provide limited syntax highlighting using the most
excellent codemirror syntax highlighter.

See:
http://marijn.haverbeke.nl/codemirror/

Stick the .js and .css files in the appropriate spots for your
codemirror installation.

You can enable it on a textarea using something like:

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

...

<textarea id="code" cols="120" rows="30">
{{ hello.world }}
{% for hello in hellos %}

{% endfor %}
</textarea>

...

<script type="text/javascript">
  var editor = CodeMirror.fromTextArea('id_content', {
    height: "350px",
    parserfile: "parsedjango.js",
    stylesheet: "/site_media/codemirror/css/djangocolors.css",
    path: "/site_media/codemirror/js/",
    continuousScanning: 500,
    lineNumbers: true
  });
</script>

djangocolors.css

html {
  cursor: text;
}

.editbox {
  margin: .4em;
  padding: 0;
  font-family: monospace;
  font-size: 10pt;
  color: black;
}

.editbox p {
  margin: 0;
}

span.django {
  color: #999;
}

span.django-quote {
  color: #281;
}

span.django-tag-name {
  color: #000;
  font-weight: bold;
}

span.xml-tagname {
  color: #A0B;
}

span.xml-attribute {
  color: #281;
}

span.xml-punctuation {
  color: black;
}

span.xml-attname {
  color: #00F;
}

span.xml-comment {
  color: #A70;
}

span.xml-cdata {
  color: #48A;
}

span.xml-processing {
  color: #999;
}

span.xml-entity {
  color: #A22;
}

span.xml-error {
 color: #F00 !important;
}

span.xml-text {
  color: black;
}

parsedjango.js

/* This file defines an XML/Django parser, with a few kludges to make it
 * useable for HTML. autoSelfClosers defines a set of tag names that
 * are expected to not have a closing tag, and doNotIndent specifies
 * the tags inside of which no indentation should happen (see Config
 * object). These can be disabled by passing the editor an object like
 * {useHTMLKludges: false} as parserConfig option.
 */

var XMLParser = Editor.Parser = (function() {
  var Kludges = {
    autoSelfClosers: {"br": true, "img": true, "hr": true, "link": true, "input": true,
                      "meta": true, "col": true, "frame": true, "base": true, "area": true},
    doNotIndent: {"pre": true, "!cdata": true}
  };
  var NoKludges = {autoSelfClosers: {}, doNotIndent: {"!cdata": true}};
  var UseKludges = Kludges;
  var alignCDATA = false;

  // Simple stateful tokenizer for XML documents. Returns a
  // MochiKit-style iterator, with a state property that contains a
  // function encapsulating the current state. See tokenize.js.
  var tokenizeXML = (function() {
    function inText(source, setState) {
      var ch = source.next();

      if (ch == "{" && source.equals("{")){
	  setState(inDjango("}}", false));
	  return "django";
      }

      if (ch == "{" && source.equals("%")){
	  setState(inDjango("%}", true));
	  return "django";
      }

      else if (ch == "<") {
        if (source.equals("!")) {
          source.next();
          if (source.equals("[")) {
            if (source.lookAhead("[CDATA[", true)) {
              setState(inBlock("xml-cdata", "]]>"));
              return null;
            }
            else {
              return "xml-text";
            }
          }
          else if (source.lookAhead("--", true)) {
            setState(inBlock("xml-comment", "-->"));
            return null;
          }
          else {
            return "xml-text";
          }
        }
        else if (source.equals("?")) {
          source.next();
          source.nextWhileMatches(/[\w\._\-]/);
          setState(inBlock("xml-processing", "?>"));
          return "xml-processing";
        }
        else {
          if (source.equals("/")) source.next();
          setState(inTag);
          return "xml-punctuation";
        }
      }
      else if (ch == "&") {
        while (!source.endOfLine()) {
          if (source.next() == ";")
            break;
        }
        return "xml-entity";
      }
      else {
        source.nextWhileMatches(/[^&<\n{]/);
        return "xml-text";
      }
    }

    function inTag(source, setState) {
      var ch = source.next();
      if (ch == ">") {
        setState(inText);
        return "xml-punctuation";
      }
      else if (/[?\/]/.test(ch) && source.equals(">")) {
        source.next();
        setState(inText);
        return "xml-punctuation";
      }
      else if (ch == "=") {
        return "xml-punctuation";
      }
      else if (/[\'\"]/.test(ch)) {
        setState(inAttribute(ch));
        return null;
      }
      else {
        source.nextWhileMatches(/[^\s\u00a0=<>\"\'\/?]/);
        return "xml-name";
      }
    }

    function inAttribute(quote) {
      return function(source, setState) {
        while (!source.endOfLine()) {
          if (source.next() == quote) {
            setState(inTag);
            break;
          }
        }
        return "xml-attribute";
      };
    }

    function inBlock(style, terminator) {
      return function(source, setState) {
        while (!source.endOfLine()) {
          if (source.lookAhead(terminator, true)) {
            setState(inText);
            break;
          }
          source.next();
        }
        return style;
      };
    }

    function inDjangoQuote(quote, terminator){
      return function(source, setState) {
	  source.next();
	  while (!source.endOfLine()) {
	      if (source.next() == quote) {
		  setState(inDjango(terminator, false));
		  break;
	      }
	  }
	  return "django-quote";
      };
    }

    function inDjangoTagName(terminator){
	return function(source, setState){
	    while (!source.endOfLine()) {
		if (source.equals(' ')) {
		    setState(inDjango(terminator, false));
		    break;
		}
		source.next();
	    }
	    return "django-tag-name";
	}
    }

    function inDjango(terminator, open){
	return function(source, setState){
	    if (open){
		source.next();
	    }

	    while(!source.endOfLine()){
		ch = source.next();

		if (open && !source.equals(' ')){
		    setState(inDjangoTagName(terminator));
		    break;
		}
		else if (ch == "'" || source.equals("'")){
		    setState(inDjangoQuote("'", terminator));
		    return "django-quote";
		}
		else if (ch == '"' || source.equals('"')){
		    setState(inDjangoQuote('"', terminator));
		    return "django-quote";
		}
		else if (ch == terminator[0] && source.equals(terminator[1])){
		    source.next();
		    setState(inText);
		    break;
		}
	    }
	    return "django";
	};
    }

    return function(source, startState) {
      return tokenizer(source, startState || inText);
    };
  })();

  // The parser. The structure of this function largely follows that of
  // parseJavaScript in parsejavascript.js (there is actually a bit more
  // shared code than I'd like), but it is quite a bit simpler.
  function parseXML(source) {
    var tokens = tokenizeXML(source), token;
    var cc = [base];
    var tokenNr = 0, indented = 0;
    var currentTag = null, context = null;
    var consume;
    
    function push(fs) {
      for (var i = fs.length - 1; i >= 0; i--)
        cc.push(fs[i]);
    }
    function cont() {
      push(arguments);
      consume = true;
    }
    function pass() {
      push(arguments);
      consume = false;
    }

    function markErr() {
      token.style += " xml-error";
    }
    function expect(text) {
      return function(style, content) {
        if (content == text) cont();
        else {markErr(); cont(arguments.callee);}
      };
    }

    function pushContext(tagname, startOfLine) {
      var noIndent = UseKludges.doNotIndent.hasOwnProperty(tagname) || (context && context.noIndent);
      context = {prev: context, name: tagname, indent: indented, startOfLine: startOfLine, noIndent: noIndent};
    }
    function popContext() {
      context = context.prev;
    }
    function computeIndentation(baseContext) {
      return function(nextChars, current) {
        var context = baseContext;
        if (context && context.noIndent)
          return current;
        if (alignCDATA && /<!\[CDATA\[/.test(nextChars))
          return 0;
        if (context && /^<\//.test(nextChars))
          context = context.prev;
        while (context && !context.startOfLine)
          context = context.prev;
        if (context)
          return context.indent + indentUnit;
        else
          return 0;
      };
    }

    function base() {
      return pass(element, base);
    }
    var harmlessTokens = {"xml-text": true, "xml-entity": true, "xml-comment": true, "xml-processing": true, "django": true, "django-quote": true, "django-tag-name": true };
    function element(style, content) {
      if (content == "<") cont(tagname, attributes, endtag(tokenNr == 1));
      else if (content == "</") cont(closetagname, expect(">"));
      else if (style == "xml-cdata") {
        if (!context || context.name != "!cdata") pushContext("!cdata");
        if (/\]\]>$/.test(content)) popContext();
        cont();
      }
      else if (harmlessTokens.hasOwnProperty(style)) cont();
      else {markErr(); cont();}
    }
    function tagname(style, content) {
      if (style == "xml-name") {
        currentTag = content.toLowerCase();
        token.style = "xml-tagname";
        cont();
      }
      else {
        currentTag = null;
        pass();
      }
    }
    function closetagname(style, content) {
      if (style == "xml-name") {
        token.style = "xml-tagname";
        if (context && content.toLowerCase() == context.name) popContext();
        else markErr();
      }
      cont();
    }
    function endtag(startOfLine) {
      return function(style, content) {
        if (content == "/>" || (content == ">" && UseKludges.autoSelfClosers.hasOwnProperty(currentTag))) cont();
        else if (content == ">") {pushContext(currentTag, startOfLine); cont();}
        else {markErr(); cont(arguments.callee);}
      };
    }
    function attributes(style) {
      if (style == "xml-name") {token.style = "xml-attname"; cont(attribute, attributes);}
      else pass();
    }
    function attribute(style, content) {
      if (content == "=") cont(value);
      else if (content == ">" || content == "/>") pass(endtag);
      else pass();
    }
    function value(style) {
      if (style == "xml-attribute") cont(value);
      else pass();
    }

    return {
      indentation: function() {return indented;},

      next: function(){
        token = tokens.next();
        if (token.style == "whitespace" && tokenNr == 0)
          indented = token.value.length;
        else
          tokenNr++;
        if (token.content == "\n") {
          indented = tokenNr = 0;
          token.indentation = computeIndentation(context);
        }

        if (token.style == "whitespace" || token.type == "xml-comment")
          return token;

        while(true){
          consume = false;
          cc.pop()(token.style, token.content);
          if (consume) return token;
        }
      },

      copy: function(){
        var _cc = cc.concat([]), _tokenState = tokens.state, _context = context;
        var parser = this;
        
        return function(input){
          cc = _cc.concat([]);
          tokenNr = indented = 0;
          context = _context;
          tokens = tokenizeXML(input, _tokenState);
          return parser;
        };
      }
    };
  }

  return {
    make: parseXML,
    electricChars: "/",
    configure: function(config) {
      if (config.useHTMLKludges != null)
        UseKludges = config.useHTMLKludges ? Kludges : NoKludges;
      if (config.alignCDATA)
        alignCDATA = config.alignCDATA;
    }
  };
})();