#027: Code Syntax Highlighting, Teil 1

Seit ich denken kann, habe ich Google Code Prettify verwendet, um die Syntaxhervorhebung für Codeblöcke auf CSS-Tricks anzuwenden. Sie wissen schon, wo in einer Zeile wie <div>test</div> der Teil <div> eine andere Farbe hat als der Teil test. Das ist sehr hilfreich für die Lesbarkeit von Code. Es hilft den Lesern auch sofort zu verstehen, dass es sich bei dem, was sie gerade sehen, um einen Codeblock handelt (Leute scannen gerne Artikel, wussten Sie das?).

Bei diesem neuen Design haben wir uns stattdessen für das frisch veröffentlichte Prism.js entschieden. Es ist deutlich leichter und schneller. Außerdem ist es darauf zugeschnitten, nur mit HTML, CSS und JavaScript zu arbeiten, was 95 % des Codes auf CSS-Tricks ausmacht. Ich mag auch sehr, wie die für die Farbgebung verwendeten Klassennamen rational benannt sind.

Wir beginnen damit, herauszufinden, wie genau wir es verwenden. Zuerst weisen wir CodeKit an, diese Bibliothek in unsere globale JavaScript-Datei zu integrieren (die bisher leer ist, aber dort werden wir später Code schreiben). Wir verknüpfen die komprimierte JavaScript-Datei in unserem integrierten Fußbereich.

Es dauert einen Moment, bis wir verstehen, dass es nichts gibt, was man "aufrufen" muss, es funktioniert einfach, vorausgesetzt, die richtigen Klassennamen sind vorhanden. Wir beenden den Vorgang, indem wir ein wenig mit dem CSS herumspielen und den Code so aussehen lassen, wie er auf CSS-Tricks immer ausgesehen hat.