Ajaxschmiede.de

Für mich als ein Blogger, der häufig Code-Schnipsel postet, ist es ziemlich umständlich den Code ansprechend formatiert im Blog zu präsentieren. Vor allem What You See Is What You Get-Editoren neigen gern dazu, sämtliche Einrückungen zu entfernen.

Das SyntaxHighlighting-Plugin für WordPress eignet sich sehr gut zum Hervorheben der Codesyntax. Einrücken lässt sich der Code jedoch nicht bzw. nur einem zusätzlichen Editor wie z.B. EditPlus. Man formatiert den Code in EditPlus und fügt ihn dann im Code-Modus des WordPress-Editors ein. Sobald man den Beitrag wieder bearbeitet, verschwindet die Code-Formatierung jedoch. Die einzige Möglichkeit wäre, den Beitrag direkt in der Datenbank (bspw. über phpMyAdmin) zu bearbeiten.

Diesem Umstand wollte ich mich nicht beugen und schrieb eine Javascript-Funktion, die von automatisch sämtliche Einrückungen zur Formatierung vornimmt. Das Ergebnis kann man in folgender Demoseite ansehen. Das Script funktioniert mit CSS, (X)HTML, XML, Javascript und im Grunde jeder Programmiersprache, die eine C-ähnliche Syntax aufweist.
Die Funktionsweise des Scriptes ist schnell erklärt.

Die Funktion autoIndent erwartet als Parameter den Pfad zu dem Element, in dem der automatisch einzurückende Code steht. Das Script holt sich den Code und schreibt diesen zeilenweise in ein Array. Dieses Array wird in einer Schleife durchlaufen, dabei wird jedes Feld (sprich jede Zeile) zuerst von bisherigen Einrückungen befreit und anschließend mit einer neuen Formatierung versehen. Die Variable indents speichert die Anzahl der Einrückungen von links. Beispielsweise, wenn man sich in der 2. {-Klammer befindet, müssen die folgenden Zeilen bis zu }-Klammer um 2 eingerückt werden. Die Anzahl der Einrückungen holt sich die Funktion über die Anzahl der {-Klammern respektive Tags. Zum Erkennen der Klammern und Tags verwendete ich reguläre Ausdrücke.

Die komplette, unkommentierte Funktion sieht so aus:

function autoIndent( path ) {
indents = 0;
code = path.innerHTML;
eArray = code.match( /(.*)\r\n|(.*)(\n)?/gi );
code = „“;

for ( var i = 0; eArray[i]; i++ ) {
eArray[i] = eArray[i].replace(/\r|\n|\n\r|\n\r/gi, „“);
eArray[i] = eArray[i].replace(/^([\s]| | )*/, „“);

if ( eArray[i].match(/\}|<\/[\w]+>/i) && indents > 0) {
eLength = eArray[i].match(/\}|<\/[\w]+>/gi).length;
indents -= eLength;
if ( indents < 0 ) indents = 0; } if ( navigator.appName.indexOf("Internet Explorer") > 0 && i != 0 ) code += „
„;

if ( i != 0 ) code += „\n“;

if ( eArray[i] != „“ ) {
for (var j = 0; j < indents ; j++ ) { code += "    "; } } else { code += " "; } if ( ( eArray[i].match(/\<[\w]+>/i) && eArray[i].match(/\<\/[\w]+>/i) ) || eArray[i].match(/[\w\s;:]+\}/i) ) code += "    "; code += eArray[i]; if ( eArray[i].match(/\{|<[\w]+>/i) ) { indents++; } } path.innerHTML = code; } [/source] Ich habe die Funktion im Internet Explorer (5.01, 5.5, 6 und 7), Firefox (2.0.0.11), Opera (9.50 Beta) und Safari (3.0.4) erfolgreich getestet. Als nächstes werde ich versuchen die Funktion in das oben genannte SyntaxHighlighting-Plugin zu integrieren oder zumindest dafür zu sorgen, dass beide parallel zu einander benutzt werden können.