# 027: Zvýraznění syntaxe kódu, část 1 - Triky CSS

Anonim

Pokud si pamatuji, použil jsem Google Code Prettify k použití zvýraznění syntaxe na bloku kódu na CSS-Tricks. Víte, kde v řádku jako test je část má jinou barvu než testčást. To je velmi užitečné pro čitelnost kódu. Pomáhá také čtenářům okamžitě pochopit, na co se dívají, je blok kódu (lidé rádi skenují články, nevíte).

V tomto novém designu se místo toho rozhodneme použít čerstvě vydaný Prism.js. Je to docela lehčí a rychlejší. Je také přizpůsoben pro práci pouze s HTML, CSS a JavaScriptem, což je 95% kódu v CSS-Tricks. Také se mi docela líbí, jak jsou názvy tříd používané k barvení racionálně pojmenovány.

Začínáme zjišťovat, jak přesně jej použít. Nejprve řekneme CodeKit, aby tuto knihovnu zřetězil do našeho globálního souboru JavaScriptu (který je zatím prázdný, ale budeme tam psát kód později). Propojíme komprimovaný soubor JavaScriptu v naší přiložené části zápatí.

Trvá nám minutu, než pochopíme, že neexistuje nic, čemu „zavoláte“, prostě to funguje za předpokladu, že máte zavedeny správné názvy tříd. Nakonec skončíme tím, že si trochu pohrajeme s CSS a necháme kód vypadat, jako by to na CSS-Tricks vždy mělo.