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

Lazy Image Loading mit WordPress Ich bin Blog-technisch ein 1a Verfechter von "Wie macht Caschy das", den im Gegensatz zu unsereins hat er noch ganz andere Probleme als wir, nämlich d...
Einfaches HTML Testing mit dem HTML Inspector Damals, als ich noch den Firefox verwendet habe, gab es ein nettes Tool mit dem man testen konnte ob HTML valide ist. Dann kam HTML5, alles wurde ande...
OpenJS Grid – Visualisierung von Daten via Ajax Ok, der Titel ist vielleicht etwas mystisch, im Endeffekt reden wir über einen mit JavaScript aufgebohrten Table ;) Ich habe mich ja schon des Öfteren...
Blackbird – netter Ersatz für alert(); JavaScript Debugging ist meistens eine sehr dumme Angelegenheit, und hierbei rede ich jetzt nicht von "netten" Browsern, die console.log(); unterstütz...

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