# 027: Evidențierea sintaxei codului, partea 1 - CSS-Tricks

Anonim

Din câte îmi amintesc, am folosit Google Code Prettify pentru a aplica evidențierea sintaxei pe blocul de cod pe CSS-Tricks. Știi, unde într-o linie de genul test , piesa are o culoare diferită de cea a testpiesei. Acest lucru este foarte util pentru lizibilitatea codului. De asemenea, îi ajută pe cititori să înțeleagă instantaneu ceea ce caută un bloc de cod (oamenilor le place să scaneze articole, nu știi).

În acest nou design, decidem să mergem cu Prism.js proaspăt lansat. Este destul de ușor și mai rapid. De asemenea, este adaptat pentru a funcționa doar cu HTML, CSS și JavaScript, care reprezintă 95% din codul CSS-Tricks. Îmi place, de asemenea, modul în care numele de clasă folosite pentru colorare sunt denumite rațional.

Începem să ne dăm seama cum să o folosim exact. În primul rând, îi spunem CodeKit să concateneze această bibliotecă în fișierul nostru global JavaScript (care este gol până acum, dar vom scrie cod acolo mai târziu). Conectăm fișierul JavaScript comprimat în partea de subsol inclusă.

Ne ia un minut să înțelegem că nu există nimic pe care îl „numiți”, ci doar funcționează presupunând că aveți numele corecte ale clasei. Finalizăm jucându-ne puțin cu CSS și făcând codul să arate mai mult ca întotdeauna pe CSS-Tricks.