Vi har lige installeret Prism.js og fik det til at fungere.
I denne screencast finder vi et tema kaldet Tomorrow Theme og indgraver dets farver i syntaksen. Vi laver en lille farvetast øverst i filen til hurtig reference. Vi gætter også på, hvad der er hvad, i det mindste for at starte. Hvad vi ender med, farvemæssigt, er OK, men ikke spektakulært. Hvis du gennemsøger webstedet i dag, vil du bemærke, at farvetemaet mere ligner Twilight, som jeg plejede at elske i TextMate, og jeg elsker i øjeblikket i Sublime Text 2.
Vi afslutter ved at føje headerbjælkerne til kodestykker. Vi har ikke faktisk markering gør dette (hvilket sandsynligvis er godt, det er for det meste bare en dekoratør) vi tilføjer det ved hjælp af et pseudo-element og genereret indhold via relattributten på koden. Det meste af den eksisterende kode på CSS-Tricks har denne attribut. Hvis det ikke gør det, ikke en big deal. Vi bruger ikke rigtig relden rigtige måde her, men jeg er ikke alt for bekymret over det.
pre(rel):before ( content: attr(rel); )Vi løber ind i et lille problem med at gøre det pseudo-element 100% bredt med polstring. Viser, at vores boksstørrelseserklæring på * -vælgeren ikke påvirker pseudo-elementer (lidt fornuftigt), så vi opdaterer vores Normaliser for at inkludere det.