Acabamos de instalar Prism.js y lo hicimos funcionar.
En este screencast, encontramos un tema llamado Tomorrow Theme e integramos sus colores en el resaltado de sintaxis. Hacemos una pequeña clave de color en la parte superior del archivo para una referencia rápida. También hacemos algunas conjeturas sobre qué es qué, al menos para empezar. Lo que obtenemos, en cuanto al color, está bien, pero no es espectacular. Si navega por el sitio hoy, notará que el tema de color se parece más a Crepúsculo, que solía amar en TextMate y actualmente me encanta en Sublime Text 2.
Terminamos agregando las barras de encabezado a los fragmentos de código. No tenemos marcado real para hacer esto (lo cual probablemente sea bueno, es principalmente un decorador) lo agregamos usando un pseudo elemento y contenido generado a través del relatributo en el código. La mayor parte del código existente en CSS-Tricks tiene este atributo. Si no es así, no es gran cosa. Realmente no estamos usando relde la manera correcta aquí, pero no estoy demasiado preocupado por eso.
pre(rel):before ( content: attr(rel); )Nos encontramos con un pequeño problema al hacer que ese pseudo elemento sea 100% ancho con relleno. Resulta que nuestra declaración de tamaño de caja en el selector * no afecta a los pseudo elementos (tiene sentido), así que actualizamos nuestro Normalizar para incluir eso.