Zolang ik me kan herinneren, heb ik Google Code Prettify gebruikt om de syntaxisaccentuering op het codeblok op CSS-Tricks toe te passen. Weet je, waar in een lijn als test , het onderdeel een andere kleur heeft dan het testonderdeel. Dit is erg handig voor de leesbaarheid van de code. Het helpt lezers ook meteen te begrijpen waar ze naar kijken als een codeblok (mensen scannen graag artikelen, weet je niet).
In dit nieuwe ontwerp besluiten we om in plaats daarvan voor het pas uitgebrachte Prism.js te gaan. Het is een stuk lichter en sneller. Het is ook op maat gemaakt om alleen met HTML, CSS en JavaScript te werken, wat 95% van de code op CSS-Tricks is. Ik vind het ook heel leuk hoe de klassenamen die worden gebruikt om in te kleuren, rationeel worden genoemd.
We beginnen erachter te komen hoe we het precies moeten gebruiken. Allereerst vertellen we CodeKit om deze bibliotheek samen te voegen in ons globale JavaScript-bestand (dat tot nu toe leeg is, maar we zullen daar later code schrijven). We koppelen het gecomprimeerde JavaScript-bestand aan ons meegeleverde voettekstgedeelte.
Het kost ons een minuut om te begrijpen dat er niets is dat je "noemt", het werkt gewoon als je de juiste klassenamen hebt. We eindigen door een beetje met de CSS te spelen en de code meer te laten lijken op CSS-Tricks.