Právě jsme nainstalovali Prism.js a fungovali jsme.
V tomto screencastu najdeme téma zvané Tomorrow Theme a integrujeme jeho barvy do zvýraznění syntaxe. Pro rychlou orientaci vytvoříme v horní části souboru malý barevný klíč. Také alespoň hádáme, co je co, alespoň na začátek. Co nakonec skončíme, barevně, je v pořádku, ale ne velkolepé. Pokud dnes procházíte web, všimnete si, že barevný motiv je spíš jako Twilight, který jsem měl rád v TextMate a momentálně miluji v Sublime Text 2.
Dokončíme to přidáním pruhů záhlaví do fragmentů kódu. Nemáme k dispozici skutečné označení (což je pravděpodobně dobré, je to většinou jen dekorátor), přidáme ho pomocí pseudo elementu a vygenerujeme obsah pomocí relatributu v kódu. Většina stávajících kódů v CSS-Tricks má tento atribut. Pokud tomu tak není, není to velký problém. Tady opravdu nepoužíváme relsprávným způsobem, ale nebojím se o to.
pre(rel):before ( content: attr(rel); )Narazili jsme na malý problém s vytvořením tohoto pseudoprvky 100% širokého s polstrováním. Ukázalo se, že naše deklarace velikosti boxu na selektoru * neovlivňuje pseudo prvky (trochu to dává smysl), takže aktualizujeme naši Normalize, aby to zahrnovala.