Aussi loin que je me souvienne, j'ai utilisé Google Code Prettify pour appliquer la coloration syntaxique sur le bloc de code sur CSS-Tricks. Vous savez, où dans une ligne comme test , la pièce est d'une couleur différente de la testpièce. Ceci est très utile pour la lisibilité du code. Cela aide également les lecteurs à comprendre instantanément ce qu'ils recherchent, c'est un bloc de code (les gens aiment analyser les articles, vous ne savez pas).
Dans ce nouveau design, nous décidons d'opter pour le Prism.js fraîchement sorti. C'est un peu plus léger et plus rapide. Il est également conçu pour fonctionner uniquement avec HTML, CSS et JavaScript, qui représente 95% du code sur CSS-Tricks. J'aime aussi assez la façon dont les noms de classe utilisés pour la coloration sont nommés rationnellement.
Nous commençons à comprendre comment l'utiliser exactement. Tout d'abord, nous demandons à CodeKit de concaténer cette bibliothèque dans notre fichier JavaScript global (qui est vide jusqu'à présent, mais nous y écrirons du code plus tard). Nous lions le fichier JavaScript compressé dans notre partie de pied de page incluse.
Cela nous prend une minute pour comprendre qu'il n'y a rien que vous «appelez», cela fonctionne juste en supposant que vous avez les bons noms de classe en place. Nous finissons par jouer un peu avec le CSS et faire en sorte que le code ressemble plus à ce qu'il a toujours sur CSS-Tricks.
