Vi har nettopp installert Prism.js og fikk det til å fungere.
I denne skjermsendingen finner vi et tema som heter Tomorrow Theme og innretter fargene i syntaksen. Vi lager en liten fargetast øverst i filen for rask referanse. Vi gjetter også noen gjetninger om hva som er hva, i det minste for å starte. Det vi ender med, fargemessig, er OK, men ikke spektakulært. Hvis du surfer rundt på siden i dag, vil du legge merke til at fargetemaet er mer som Twilight, som jeg pleide å elske i TextMate, og jeg elsker for øyeblikket i Sublime Text 2.
Vi avslutter med å legge til topptekstene i kodebiter. Vi har ikke faktisk markering gjør dette (som sannsynligvis er bra, det er for det meste bare en dekoratør) vi legger til det ved hjelp av et pseudo-element og generert innhold via relattributtet på koden. Det meste av eksisterende kode på CSS-Tricks har dette attributtet. Hvis den ikke gjør det, er det ikke så farlig. Vi bruker egentlig ikke relpå riktig måte her, men jeg er ikke så bekymret for det.
pre(rel):before ( content: attr(rel); )Vi får et lite problem med å gjøre det pseudo-elementet 100% bredt med polstring. Slår ut at vår boksstørrelseserklæring på * -velgeren ikke påvirker pseudoelementer (ganske fornuftig), så vi oppdaterer Normaliser for å inkludere det.