# 028: Evidențierea sintaxei codului, partea 2 - CSS-Tricks

Anonim

Tocmai am instalat Prism.js și am funcționat.

În acest screencast găsim o temă numită Tema de mâine și încorporăm culorile sale în evidențierea sintaxei. Creăm o mică cheie de culoare în partea de sus a fișierului pentru referință rapidă. De asemenea, facem câteva presupuneri cu privire la ceea ce este, cel puțin pentru a începe. Ceea ce am ajuns, în ceea ce privește culoarea, este OK, dar nu spectaculos. Dacă navigați astăzi pe site, veți observa că tema culorilor seamănă mai mult cu Twilight, pe care o iubeam în TextMate și în prezent ador în Sublime Text 2.

Finalizăm adăugând bare de antet la fragmentele de cod. Nu avem un markup propriu-zis pentru a face acest lucru (ceea ce este probabil bun, este în mare parte doar un decorator) îl adăugăm prin utilizarea unui pseudoelement și a conținutului generat prin relatributul din cod. Majoritatea codului existent pe CSS-Tricks are acest atribut. Dacă nu, nu este mare lucru. Nu folosim relîn mod corect aici, dar nu sunt prea îngrijorat de asta.

pre(rel):before ( content: attr(rel); )

Ne confruntăm cu o mică problemă cu creșterea acelui pseudo-element 100% lată cu umplutură. Rezultă că declarația noastră de dimensionare a cutiei de pe selectorul * nu afectează pseudoelementele (cam are sens), așa că ne actualizăm Normalizarea pentru a include asta.