Syntax Highlighting in Javascript

Syntax Highlighting ist – als Blogbetreiber – eine recht anstrengende Sache. Zunächst einmal muss man WordPress erklären, dass es bitte schön die Finger vom Code zu lassen hat, als Nächstes muss er noch farblich in hübsches HTML überarbeitet werden. Zumindest Ersteres ist schon ein Thema für sich. WordPress – oder besser der WYSIWYG-Editor TinyMCE – hat das Feature „HTML aufräumen“ – was mich in regelmäßigen Abständen in den Wahnsinn treibt. Was das genau heißt? A) man sollte eigenen Code stets in ein <pre>-Tag setzen und b) das bedeutet nicht das TinyMCE die Finger davon lässt und den Code nicht verschlimmbessert optimiert!

In anderen Worten: In schöner Regelmäßigkeit zersetzt der TinyMCE Code-Beispiele. Ich habe noch keine vernünftige Möglichkeit gefunden, TinyMCE dies abzugewöhnen, aber es ist auch nur das halbe Problem. Hat man den Code nämlich einmal im System, wird er zwar dargestellt, aber weder schön noch sinnvoll. Was fehlt ist ein Syntax Highlighting! Dieses kann wiederum durch gefühlte 1.000 Plugins nachgerüstet werden die allesamt auf der Tatsache beruhen, dass sie mittels Geshi und einem Filter den Code serverseitig „einfärben“.

Demo von jQuery Syntax

Geshi zeichnet sich insbesondere dadurch aus, dass es jede noch so mystische Sprache auf diesem Planeten – wahrscheinlich sogar Lochstanzkarten – unterstützt. Geshi an sich ist kein Leichtgewicht und die Einflussmöglichkeiten, die genommen werden können, sind gering. Kombiniert mit schlechter Programmierung und einem WordPress-Filter kommt ein Moloch heraus den man wahrscheinlich in seiner Komplexität nur schlecht überbieten kann. Dies ist auch der Grund, wieso ich hier im Blog regelmäßig die Art und Weise, wie das Syntax Highlighting funktioniert, schlicht und ergreifend komplett austausche.

jQuery Syntax ist eine interessante Alternative die als jQuery Plugin kein Geshi benutzt und das Feature besitzt, das die Grundversion nur 11kb besitzt. In dieser Grundversion sind keine Sprachdefinitionen enthalten. Der Core ist clever genug nur die Definition für die Sprachen nachzuladen, die auch wirklich benutzt werden. Darüber hinaus bietet es Themes an und kommt mit einem sehr gutem Standard-Theme. Alle Farben und Settings sind einfach anpassbar und über CSS änderbar. Besonders gut gefällt mir, dass das ganze auch Inline funktioniert!

jQuery Syntax stellt meines Erachtens eine sehr gute Alternative zu den Geshi-basierten Systemen zur Verfügung und ist vor allem eins: klein, schnell und anpassbar. Eine direkte Einbindung ins Theme belastet WordPress so gut wie gar nicht!

Ähnliche Beiträge

Modernizr – HTML5 und CSS3 mit Fallback Manchmal ist der Teufel ein Eichhörnchen, und scheinbar hat er sich an einem langen Winterabend überlegt, der beste Weg die Menschheit zu quälen wären...
Animierte Sprites in jQuery ohne Flash Ich gebe zu das ich ein echter Fan von vektorbasierenden Blog-Headern bin. Noch cooler wäre es allerdings, wenn die Teile animiert wären, dafür gäbe e...
Gantt Komponente für jQuery Frage ich mal etwas direkter - was macht ihr, wenn euer Kunde euch fragt, wann das Projekt fertig ist? Die korrekte Antwort würde hier wohl "Raten unt...
Ideale Formulare in HTML5 Zusammen mit HTML5 wurden Formulare in ihren Möglichkeiten immens aufgewertet, was prinzipiell super ist, wenn man es benutzen könnte. Es ergibt sich ...

3 Antworten auf „Syntax Highlighting in Javascript“

  1. Hello, thanks for talking about my project, you have given me many compliments. If you have any feedback regarding integration with WordPress, please let me know. I don’t use WordPress on a regular basis and so have only done basic integration. If you have any suggestions as to how this can be improved, please let me know.

    Thanks!
    Samuel

  2. Pingback: Linkhub – Woche 32-2010 - pehbehbeh
  3. Ich nutze dies schon sehr lange und bin sehr zufrieden – das ersetzen via PHP kostet einfach zu viel Ressourcen. Wer kein JS aktiv hat, kann auch ohne Highlighting leben. Ich habe dazu ein Plugin für WordPress, aber nicht öffentlich, da einige Themen noch rein sollen – mal sehen, wann ich Zeit finde.
    Ich nutze die JS Library dazu highlight.js

    * ebenso toll – 1k Highlightning

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.