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

WordPress mit Download-Codes Ich bin heute über ein interessantes WordPress-Plugin gestolpert, das es erlaubt, Downloads mit einem Code zu versehen! Was bedeutet dies im Einzelnen...
Underscore.string – String Manipulation für ... Drücken wir es nett aus: JavaScript und Strings sind keine guten Freunde. Vielleicht bin ich da etwas zu verwöhnt, aber ein bisschen geschickter hätte...
Die Selektoren von jQuery erweitern Ich bin über einen recht interessanten Artikel im Blog von James Padolsey gestolpert, der nachhaltig Arbeit einsparen kann, insofern man jQuery verwen...
Entwurfsmuster für JavaScript Entwurfsmuster (englisch: Design Patterns) sind eine Art Best Practice für Programmiersprachen. Also der optimale Weg ein Ziel zu erreichen. Entwurfsm...

3 Kommentare

  • 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

  • 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