Nous venons d'installer Prism.js et de le faire fonctionner.
Dans ce screencast, nous trouvons un thème appelé Thème de demain et intégrons ses couleurs dans la coloration syntaxique. Nous créons une petite clé de couleur en haut du fichier pour une référence rapide. Nous faisons également des suppositions sur ce qui est quoi, au moins pour commencer. Ce que nous obtenons, en termes de couleurs, est correct mais pas spectaculaire. Si vous parcourez le site aujourd'hui, vous remarquerez que le thème de couleur ressemble plus à Twilight, que j'aimais dans TextMate et que j'aime actuellement dans Sublime Text 2.
Nous terminons en ajoutant les barres d'en-tête aux extraits de code. Nous n'avons pas de balisage réel pour faire cela (ce qui est probablement bien, c'est surtout juste un décorateur), nous l'ajoutons en utilisant un pseudo élément et du contenu généré via l' relattribut sur le code. La plupart du code existant sur CSS-Tricks a cet attribut. Si ce n'est pas le cas, ce n'est pas grave. Nous n'utilisons pas vraiment relde la bonne manière ici, mais je ne suis pas trop inquiet à ce sujet.
pre(rel):before ( content: attr(rel); )Nous rencontrons un petit problème pour rendre ce pseudo élément 100% large avec un rembourrage. Il s'avère que notre déclaration de dimensionnement de la boîte sur le sélecteur * n'affecte pas les pseudo éléments (un peu a du sens), nous mettons donc à jour notre Normalisation pour l'inclure.
