Acabamos de instalar o Prism.js e colocá-lo em funcionamento.
Neste screencast encontramos um tema chamado Tomorrow Theme e incorporamos suas cores ao destaque de sintaxe. Criamos uma pequena chave colorida no topo do arquivo para referência rápida. Também fazemos algumas suposições sobre o que é o quê, pelo menos para começar. O que acabamos com, em termos de cores, é bom, mas não espetacular. Se você navegar pelo site hoje, notará que o tema de cores é mais parecido com Twilight, que eu costumava adorar no TextMate e atualmente estou amando no Sublime Text 2.
Terminamos adicionando as barras de cabeçalho aos trechos de código. Não temos marcação real para fazer isso (o que provavelmente é bom, na maioria das vezes é apenas um decorador), adicionamos usando um pseudo elemento e gerando conteúdo por meio do relatributo no código. A maior parte do código existente no CSS-Tricks tem esse atributo. Se não, não é grande coisa. Não estamos realmente usando relda maneira correta aqui, mas não estou muito preocupado com isso.
pre(rel):before ( content: attr(rel); )Encontramos um pequeno problema em tornar esse pseudo elemento 100% largo com preenchimento. Acontece que nossa declaração de tamanho de caixa no seletor * não afeta pseudo-elementos (meio que faz sentido), então atualizamos nosso Normalize para incluí-lo.