Soweit ich mich erinnern kann, habe ich Google Code Prettify verwendet, um die Syntaxhervorhebung auf den Codeblock in CSS-Tricks anzuwenden. Sie wissen, wo in einer Linie wie test das Teil eine andere Farbe als das testTeil hat. Dies ist sehr hilfreich für die Lesbarkeit des Codes. Es hilft den Lesern auch sofort zu verstehen, was sie als Codeblock betrachten (Leute scannen gerne Artikel, wissen Sie nicht).
In diesem neuen Design entscheiden wir uns stattdessen für die frisch veröffentlichten Prism.js. Es ist ziemlich viel leichter und schneller. Es ist auch darauf zugeschnitten, nur mit HTML, CSS und JavaScript zu arbeiten, was 95% des Codes in CSS-Tricks ausmacht. Mir gefällt auch sehr gut, wie die zum Färben verwendeten Klassennamen rational benannt werden.
Wir beginnen herauszufinden, wie wir es genau verwenden sollen. Zunächst weisen wir CodeKit an, diese Bibliothek in unsere globale JavaScript-Datei zu verketten (die bisher leer ist, aber wir werden dort später Code schreiben). Wir verknüpfen die komprimierte JavaScript-Datei in unserem enthaltenen Fußzeilenteil.
Wir brauchen eine Minute, um zu verstehen, dass Sie nichts „anrufen“. Es funktioniert nur, wenn Sie die richtigen Klassennamen haben. Zum Schluss spielen wir ein wenig mit dem CSS herum und lassen den Code so aussehen, wie er bei CSS-Tricks immer der Fall ist.