Desde que tengo memoria, utilicé Google Code Prettify para aplicar el resaltado de sintaxis en el bloque de código en CSS-Tricks. Ya sabes, en una línea como test , la pieza es de un color diferente al de la testpieza. Esto es muy útil para la legibilidad del código. También ayuda a los lectores a comprender instantáneamente lo que están viendo es un bloque de código (a la gente le gusta escanear artículos, ¿no lo sabe?).
En este nuevo diseño, decidimos utilizar Prism.js recién lanzado. Es un poco más ligero y rápido. También está diseñado para funcionar solo con HTML, CSS y JavaScript, que es el 95% del código en CSS-Tricks. También me gusta bastante cómo se nombran racionalmente los nombres de clase utilizados para colorear.
Comenzamos a descubrir cómo usarlo exactamente. En primer lugar, le decimos a CodeKit que concatene esta biblioteca en nuestro archivo JavaScript global (que está vacío hasta ahora, pero escribiremos código allí más adelante). Vinculamos el archivo JavaScript comprimido en nuestra parte de pie de página incluida.
Nos toma un minuto entender que no hay nada a lo que "llames", simplemente funciona asumiendo que tienes los nombres de clase correctos en su lugar. Terminamos jugando un poco con CSS y haciendo que el código se vea más como siempre en CSS-Tricks.