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


jQuery.sheet – Excel Spreadsheets für jQuery
Es gibt da durchaus ein oder zwei Sachen, in denen man sich in Javascript die Finger bricht und man froh ist, dass es zum Beispiel jQuery gibt. Sinnvo...


Kostenlose Bücher für JavaScript
Die großen Verlage (zumindest die amerikanischen) hauen ja regelmäßig kostenlose eBooks raus, diese sind weder minderwertig, noch eingekürzt noch triv...


Paper.js – Vektorgrafiken in Javascript mitt...
Es tauchen in letzter Zeit immer mehr Frameworks auf, die auf die eine oder andere Art und Weise versuchen, dem Webentwickler das Leben mit dem HTML5 ...


WP CleanFix – WordPress mal so richtig aufrä...
WordPress besitzt an zwei Stellen durchaus das Potenzial, eine Datenbank voll zu müllen: zum einen hätten wir da die Revisions, die man durchaus absch...

Kommentare

  1. Samuel Williams

    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. Frank

    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.