Właśnie zainstalowaliśmy Prism.js i uruchomiliśmy go.
W tym screencastie znajdziemy motyw o nazwie Motyw jutra i dołączamy jego kolory do podświetlania składni. W górnej części pliku wykonujemy mały kolorowy klucz, aby ułatwić odniesienie. Robimy też pewne przypuszczenia, od czego przynajmniej zacząć. To, co otrzymujemy, pod względem koloru, jest OK, ale nie spektakularne. Jeśli dzisiaj przejrzysz tę witrynę, zauważysz, że motyw kolorystyczny przypomina bardziej Twilight, który uwielbiałem w TextMate, a obecnie uwielbiam w Sublime Text 2.
Kończymy dodając paski nagłówka do fragmentów kodu. Nie mamy faktycznego znacznika, który to robi (co prawdopodobnie jest dobre, jest to głównie dekorator), dodajemy go za pomocą pseudoelementu i generowanej treści za pośrednictwem relatrybutu w kodzie. Większość istniejącego kodu w CSS-Tricks ma ten atrybut. Jeśli tak się nie stanie, nic wielkiego. Nie używamy tutaj relwe właściwy sposób, ale nie martwię się tym zbytnio.
pre(rel):before ( content: attr(rel); )Mamy mały problem z utworzeniem tego pseudoelementu w 100% z dopełnieniem. Okazuje się, że nasza deklaracja rozmiaru pudełka na selektorze * nie wpływa na pseudoelementy (trochę ma to sens), więc aktualizujemy naszą Normalize, aby to uwzględnić.