We hebben zojuist Prism.js geïnstalleerd en het werkt.
In deze screencast vinden we een thema met de naam Tomorrow Theme en verwerken de kleuren in de syntaxisaccentuering. We maken een kleine kleurtoets bovenaan het bestand voor snelle referentie. We raden ook wat aan, althans om te beginnen. Wat we uiteindelijk bereiken, qua kleur, is OK, maar niet spectaculair. Als je vandaag op de site rondkijkt, zul je merken dat het kleurenthema meer op Twilight lijkt, waar ik vroeger dol op was in TextMate en waar ik momenteel dol op ben in Sublime Text 2.
We eindigen door de kopbalken toe te voegen aan codefragmenten. We hebben geen echte markup om dit te doen (wat waarschijnlijk goed is, het is meestal gewoon een decorateur), we voegen het toe door een pseudo-element te gebruiken en gegenereerde inhoud via het relattribuut in de code. De meeste bestaande code op CSS-Tricks heeft dit kenmerk. Als dat niet het geval is, geen probleem. We gebruiken hier niet echt relop de juiste manier, maar ik maak me er niet al te veel zorgen over.
pre(rel):before ( content: attr(rel); )We komen een klein probleempje tegen bij het 100% breed maken van dat pseudo-element met opvulling. Blijkt dat onze box-sizing-declaratie op de * selector geen invloed heeft op pseudo-elementen (een beetje logisch), dus we updaten onze Normalize om dat op te nemen.