# 027: Realce de sintaxe de código, parte 1 - CSS-Tricks

Anonim

Pelo que me lembro, usei o Google Code Prettify para aplicar o destaque de sintaxe no bloco de código em CSS-Tricks. Você sabe, onde em uma linha como test , a parte é uma cor diferente da testparte. Isso é muito útil para a legibilidade do código. Também ajuda os leitores a entender instantaneamente o que estão vendo é um bloco de código (as pessoas gostam de escanear artigos, você não sabe).

Nesse novo design, decidimos usar o Prism.js recém-lançado. É um pouco mais leve e mais rápido. Também é adaptado para funcionar apenas com HTML, CSS e JavaScript, que é 95% do código em CSS-Tricks. Também gosto bastante de como os nomes das classes usados ​​para colorir são nomeados racionalmente.

Começamos a descobrir como exatamente usá-lo. Em primeiro lugar, dizemos ao CodeKit para concatenar essa biblioteca em nosso arquivo JavaScript global (que está vazio até agora, mas escreveremos código lá mais tarde). Vinculamos o arquivo JavaScript compactado em nossa parte de rodapé incluída.

Demora um minuto para entender que não há nada que você “chame”, apenas funciona, supondo que você tenha os nomes das turmas corretos. Terminamos brincando um pouco com o CSS e fazendo com que o código fique mais parecido com o de sempre em CSS-Tricks.