Sikäli kuin muistan, käytin Google Code Prettify -sovellusta käyttämään syntaksikorostusta CSS-Tricks-koodilohkossa. Tiedäthän, missä tämän kaltainen rivi test The osa on erivärinen kuin testosaan. Tämä on erittäin hyödyllistä koodin luettavuuden kannalta. Se auttaa myös lukijoita ymmärtämään heti, mitä he katsovat, on koodilohko (ihmiset haluavat skannata artikkeleita, etkö tiedä).
Tässä uudessa mallissa päätämme mennä sen sijaan vasta julkaistun Prism.js: n kanssa. Se on melko kevyempi ja nopeampi. Se on myös räätälöity toimimaan vain HTML: n, CSS: n ja JavaScriptin kanssa, mikä on 95% CSS-temppujen koodista. Pidän myös siitä, kuinka värityksessä käytetyt luokkien nimet on järkevästi nimetty.
Alamme selvittää, miten sitä käytetään tarkalleen. Ensinnäkin käskemme CodeKitia yhdistämään tämä kirjasto globaaliksi JavaScript-tiedostoksi (joka on toistaiseksi tyhjä, mutta kirjoitamme koodin sinne myöhemmin). Linkitämme pakatun JavaScript-tiedoston mukana olevaan alatunnisteeseen.
Meillä on minuutti aikaa ymmärtää, ettei ole mitään, mitä "soitat", se vain toimii, olettaen, että sinulla on oikeat luokkien nimet. Lopuksi pelaamme hieman CSS: n kanssa ja saamme koodin näyttämään enemmän kuin aina CSS-temppuilla.