Odkąd pamiętam, użyłem Google Code Prettify, aby zastosować podświetlanie składni w bloku kodu w CSS-Tricks. Wiesz, gdzie w linii test
,
część ma inny kolor niż test
część. Jest to bardzo pomocne dla czytelności kodu. Pomaga również czytelnikom natychmiast zrozumieć, na co patrzą, to blok kodu (ludzie lubią skanować artykuły, czy nie wiesz).
W tym nowym projekcie zdecydowaliśmy się zamiast tego na świeżo wydany Prism.js. Jest trochę lżejszy i szybszy. Jest również dostosowany do pracy tylko z HTML, CSS i JavaScript, co stanowi 95% kodu w CSS-Tricks. Bardzo podoba mi się również racjonalne nazywanie nazw klas używanych do kolorowania.
Zaczynamy wymyślać, jak dokładnie go używać. Po pierwsze, mówimy CodeKit, aby połączył tę bibliotekę z naszym globalnym plikiem JavaScript (który jest jak dotąd pusty, ale będziemy tam pisać kod później). Łączymy skompresowany plik JavaScript w naszej dołączonej stopce.
Zajmie nam chwilę, zanim zrozumiemy, że nie ma niczego, co można by „nazwać”, po prostu działa, zakładając, że masz poprawne nazwy klas. Na koniec pobawimy się trochę CSS i sprawimy, że kod będzie wyglądał bardziej tak, jak zawsze w CSS-Tricks.