Moin,

Tja, also das Syntax-Highlighting im Forum ist ziemlich schick, nur ohne ein passendes Stylesheet auch ziemlich nutzlos. Nun hat ja nicht jeder Lust so um die zwei Dutzend CSS-Regeln runterzuschreiben (also ich zumindest nicht), daher habe ich da mal was gebastelt. Als Nebeneffekt zeigt es nochmal die beeindruckende Stärke des DOM.

http://www.ploetzli.ch/forum/highlight/ zeigt mehr oder weniger (mehr weniger) sinnvolle Codebeispiele für allerlei Sprachen und ein Kontrollfeld um ein passendes Stylesheet zusammenzuklicken. Pferdefuß: Das Skript benötigt DOM Level 2 Events und DOM Level 2 Style, und soweit ich das sehe kann das nur die Gecko-Engine.

Anleitung: Mit der Maus über den Codebeispielen hovern bringt ganz oben eine Übersicht darüber welche Klassen an der Stelle verwendet wurden und wie sie verschachtelt sind. Klicken lädt die innerste Klasse zur Bearbeitung (wird in der zweiten Zeile fett dargestellt). Ab da kann man dann auch auf weiter aussen liegende Klassen in der zweiten Zeile klicken um diese zu bearbeiten.

Es gibt drei Ansichten: Bei 'Texteigenschaften' findet man die wichtigsten Eigenschaften als Textfelder, sowie mit den von der CSS-Spec vordefinierten Schlüsselworten (naja, bei den Farben nicht). Änderungen in den Textfeldern werden onchange übernommen, ggbf. also nochmal Enter drücken. Bei 'CSS-Deklarationen' findet man alle Deklarationen die für die aktuell bearbeitete Klasse angegeben wurden und kann sie bearbeiten. Änderungen werden onchange oder onkeyup übernommen, d.h. was man dort tippt ist _live_ (das ist mal richtig cool).

Diese beiden Ansichten bearbeiten nur Klassen, bzw. CSS-Selektoren der Form "code .klassenname". Es gibt noch eine dritte Ansicht 'CSS-Regeln' die dann schließlich das gesamte generierte Stylesheet enthält, ggbf. auch mit anderen Selektoren. Änderungen dort werden auch onkeyup übernommen, da ich bei meinen Tests keine deutliche Verlangsamung festgestellt hatte. (Im Nachhinein sieht man dass bei großen Stylesheets und dem großen Beispielbereich der Browser doch in's Schwitzen kommt.) Diese Ansicht kann man dann auch benutzen, wenn man das Stylesheet aus der Anwendung raus und in seinen Editor kriegen will.

Ach ja: Aller CSS-Code kommt live aus den Innereien des Browsers. Der nimmt diverse Normalisierungen vor, so dass die Eingaben nicht genau den Ausgaben entsprechen müssen. Insbesondere gehen Einrückungen etc. verloren. Schade eigentlich, aber nicht so schlimm.

Ursprünglich hatte ich noch vor, anzubieten dass man eigene Stylesheets (etwa das bisherige Benutzerstylesheet) reinladen können sollte, bin dann aber drauf gestoßen, dass das von den Cross-Site-Skripting-Sicherheitsmaßen verhindert wird. Das muss jetzt also so gehen. Ich habe daher das Standard-Forums-CSS fest als CSS eingetragen, welches von der Bearbeitung auch nicht betroffen wird. Wer trotzdem gerne sein Stylesheet reinhaben will muss sich das Skript (man braucht neben der HTML-Datei noch die highlight.js und die highlight.css) runterladen und den Code der HTML-Datei entsprechend anpassen.