Så långt jag kan minnas använde jag Google Code Prettify för att tillämpa syntaxmarkeringen på kodblock på CSS-Tricks. Du vet, var i en rad som test , delen är en annan färg än testdelen. Detta är mycket användbart för kodläsbarhet. Det hjälper också läsarna att omedelbart förstå vad de tittar på är ett kodblock (människor gillar att skanna artiklar, vet du inte).
I den här nya designen bestämmer vi oss för att gå med det nyligen släppta Prism.js istället. Det är ganska lättare och snabbare. Det är också skräddarsytt för att fungera bara med HTML, CSS och JavaScript, vilket är 95% av koden på CSS-Tricks. Jag gillar också hur klassnamnen som används för färgning rationellt namnges.
Vi börjar ta reda på hur exakt att använda den. Först och främst ber vi oss att CodeKit ska sammanfoga detta bibliotek till vår globala JavaScript-fil (som är tom hittills, men vi kommer att skriva kod där senare). Vi länkar upp den komprimerade JavaScript-filen i vår inkluderade sidfotdel.
Det tar oss en minut att förstå att det inte finns något du ”ringer”, det fungerar bara som om du har rätt klassnamn på plats. Vi avslutar med att leka lite med CSS lite och få koden att se mer ut som den alltid har gjort på CSS-Tricks.
