# 028: Koodin syntaksin korostus, osa 2 - CSS-temppuja

Anonim

Olemme juuri asentaneet Prism.js: n ja saaneet sen toimimaan.

Tässä kuvaruudussa löydämme teeman nimeltä Tomorrow Theme ja ingratoimme sen värit syntaksikorostukseen. Teemme pienen värinäppäimen tiedoston yläosaan nopeaa käyttöä varten. Teemme myös joitain arvauksia siitä, mikä on mikä, ainakin aloittaaksemme. Se, mihin päädymme, värillisesti, on ok, mutta ei mahtavaa. Jos selaat sivustoa tänään, huomaat, että väriteema on enemmän kuin Twilight, jota rakastin TextMatessa ja rakastan tällä hetkellä Sublime Text 2: ssa.

Viimeistelemme lisäämällä otsikkopalkit koodinpätkiin. Meillä ei ole todellisia merkintöjä, jotka tekevät tämän (mikä on luultavasti hyvää, se on enimmäkseen vain sisustaja), lisäämme sen käyttämällä pseudoelementtiä ja luomaa sisältöä relkoodin attribuutin kautta . Suurimmalla osalla CSS-Tricksin olemassa olevasta koodista on tämä ominaisuus. Jos ei, ei iso juttu. Emme oikeastaan ​​käytä reltäällä oikein, mutta en ole siitä liian huolissani.

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

Meillä on pieni ongelma tehdä se pseudoelementti 100% leveäksi pehmusteella. Osoittautuu, että laatikkokokoilmoitus * valitsimella ei vaikuta pseudoelementteihin (tavallaan on järkevää), joten päivitämme Normalisointimme sisällyttämään sen.