Vi har precis installerat Prism.js och fått det att fungera.
I den här skärmutsändningen hittar vi ett tema som heter Tomorrow Theme och införlivar dess färger i syntaxmarkeringen. Vi gör en liten färgknapp längst upp i filen för snabb referens. Vi gissar också vad som är vad, åtminstone för att börja. Vad vi slutar med, färgmässigt, är OK men inte spektakulärt. Om du bläddrar runt på webbplatsen idag kommer du att märka att färgtemat är mer som Twilight, vilket jag brukade älska i TextMate och jag älskar för närvarande i Sublime Text 2.
Vi avslutar med att lägga till rubrikfält i kodavsnitt. Vi har ingen faktisk markering gör detta (vilket förmodligen är bra, det är oftast bara en dekoratör) vi lägger till det genom att använda ett pseudo-element och genererat innehåll via relattributet på koden. Det mesta av den befintliga koden på CSS-Tricks har detta attribut. Om det inte gör det, inte en stor sak. Vi använder inte riktigt relpå rätt sätt här, men jag är inte alltför orolig för det.
pre(rel):before ( content: attr(rel); )Vi stöter på ett litet problem med att göra det pseudoelementet 100% brett med vaddering. Visar sig att vår box-dimensioneringsdeklaration på * väljaren inte påverkar pseudo-element (det är ganska vettigt), så vi uppdaterar vår Normalisera för att inkludera det.
