Most telepítettük a Prism.js-t, és működőképessé tettük.
Ebben a képernyőn megtaláljuk a Holnap téma nevű témát, és beépítjük a színeit a szintaxis kiemelésébe. Készítünk egy kis színes billentyűt a fájl tetején a gyors áttekintés érdekében. Néhány tippet is megfogalmazunk arra vonatkozóan, hogy mi mi, legalábbis kezdjük. Amivel színben bízunk, az rendben van, de nem látványos. Ha ma böngészi a webhelyet, észreveszi, hogy a színes téma inkább a Twilight-hoz hasonlít, amelyet korábban a TextMate-ben szerettem, és jelenleg a Sublime Text 2-ben szeretem.
Befejezésül hozzáadjuk a fejlécsávokat a kódrészletekhez. Nincs tényleges jelölésünk (ezt valószínűleg jó, ez többnyire csak egy dekoratőr) adjuk hozzá egy pszeudo elem használatával és rela kód attribútumán keresztül létrehozott tartalommal . A CSS-Tricks meglévő kódjának nagy része rendelkezik ezzel az attribútummal. Ha nem, akkor nem nagy ügy. Itt nem igazán használjuk rela megfelelő módon, de nem aggódom emiatt túlzottan.
pre(rel):before ( content: attr(rel); )Egy kis problémába ütközünk azzal, hogy ezt az álelemet 100% -osan szélessé tesszük párnázással. Kiderült, hogy a * választón lévő dobozméret-deklarációnk nem befolyásolja az álelemeket (valamennyire van értelme), ezért frissítjük a Normalize-t, hogy ezt beépítsük.