Práve sme nainštalovali Prism.js a dostali sme ho do prevádzky.
V tomto screencaste nájdeme tému s názvom Téma zajtra a jej farby včleníme do zvýraznenia syntaxe. Pre rýchlu orientáciu urobíme malý farebný kľúč v hornej časti súboru. Robíme tiež niekoľko odhadov, čo je čo, aspoň na začiatok. Čo nakoniec skončíme, farebne, je v poriadku, ale nie veľkolepé. Ak dnes budete prechádzať web, všimnete si, že farebná téma sa skôr podobá Twilight, ktorý som kedysi miloval v TextMate a momentálne milujem v Sublime Text 2.
Dokončíme to pridaním pruhov hlavičiek k úryvkom kódu. Nemáme skutočné značky, ktoré by to robili (čo je asi dobré, je to väčšinou iba dekorátor), pridávame ich pomocou pseudoprvku a generujeme obsah pomocou relatribútu v kóde. Väčšina z existujúcich kódov v CSS-Tricks má tento atribút. Ak sa tak nestane, nie je to veľký problém. Tu naozaj nepoužívame relsprávnym spôsobom, ale nebojím sa toho.
pre(rel):before ( content: attr(rel); )Narazili sme na malý problém s tým, aby bol tento pseudo prvok 100% široký s výplňou. Ukázalo sa, že naša deklarácia veľkosti boxu na selektore * nemá vplyv na pseudo prvky (trochu to dáva zmysel), takže aktualizujeme našu normalizáciu tak, aby to obsahovala.