Textarea mit Code Highlighting

Um eine HTML Textarea mit Code Highlighting zu versehen muss man ein bißchen tricksen.
Zum Glück gibts ja da schon fertige Libs, die das erledigen.
Sucht man mit Google, findet man schnell dieses hier:

http://codepress.sourceforge.net/
Dies wird aber scheinbar nicht weiterentwickelt und hat zudem einige Bugs.

Weiterhin gibts dann http://sourcepad.org.
Das sieht ganz gut aus, für meine Zwecke schon zu gut, daher habe ich mich für dieses entschieden:
http://marijn.haverbeke.nl/codemirror

Also der CodeMirror:
Installation ist einfach:
Runterladen, die nötigen Files einbinden:

<script type="text/javascript" src="js/codemirror.js"></script>
<link rel="stylesheet" type="text/css" href="css/docs.css">

Den linenumber style setzen (warum das nicht in der docs.css schon drin, fragt man sich?)

<style type="text/css">
      .CodeMirror-line-numbers {
        width: 2.2em;
        color: #aaa;
        background-color: #eee;
        text-align: right;
        padding-right: .3em;
        font-size: 10pt;
        font-family: monospace;
        padding-top: .4em;
      }
</style>

Eine Textarea anlegen:

<textarea id="code" name="PAGE_CONTENT"></textarea>

und das Highlighting aktivieren:

    var editor = CodeMirror.fromTextArea('code', {
    height: "350px",
    width: "700px",
    parserfile: "parsexml.js",
    stylesheet: "css/xmlcolors.css",
    path: "js/",
    continuousScanning: 500,
    lineNumbers: true
  });

Das wars schon.
Die Konfigurationsmöglichkeiten werden im Manual ganz gut erklärt, da gibts dann weitere Infos.

Spannend wirds allerdings wenn nun die Form submitted werden soll um den geänderten Code zu verarbeiten.
Denn der Trick bei dieser, wie auch bei den anderen Libs ist, dass das die Textarea unsichtbar gemacht wird und stattdessen ein iFrame gerendert wird mit dem Highlighting.

Submitted man nun die Form, wird natürlich nicht der aktuelle Inhalt übertragen sondern unverändert der alte.
Um zu erreichen, dass der neue Inhalt übertragen wird, muss man vorher den Code aus dem iFrame holen und in die ursprungliche Textarea setzen.
Daher besser keinen Submit Button benutzen, da ein Submit direkt feuert.
Besser ein onclick auf einen normalen Button und eine javascript funktion zwischenschalten die den Transfer übernimmt und danach submittet.
CodeMirror bietet dafür, sehr praktisch, eine Funktion an, die einem den geänderten Code liefert: getCode()
Als prototype event sehe das dann so aus:

//button id=save
Event.observe('save','click',function(event) {
 	 	  $('code').value = editor.getCode();
		  $('form').submit();//die form mit id = form
});

So siehts aus:

coole sache!