Abbiamo appena installato Prism.js e lo abbiamo fatto funzionare.
In questo screencast troviamo un tema chiamato Tomorrow Theme e inseriamo i suoi colori nell'evidenziazione della sintassi. Creiamo una piccola chiave di colore nella parte superiore del file per una rapida consultazione. Facciamo anche alcune ipotesi su cosa sia cosa, almeno per iniziare. Quello che si ottiene, dal punto di vista del colore, è OK ma non spettacolare. Se navighi nel sito oggi, noterai che il tema del colore è più simile a Twilight, che amavo in TextMate e attualmente adoro in Sublime Text 2.
Finiamo aggiungendo le barre di intestazione agli snippet di codice. Non abbiamo un markup effettivo per farlo (il che è probabilmente buono, è per lo più solo un decoratore) lo aggiungiamo utilizzando uno pseudo elemento e generato il contenuto tramite l' relattributo sul codice. La maggior parte del codice esistente su CSS-Tricks ha questo attributo. In caso contrario, non è un grosso problema. Non stiamo davvero usando relnel modo corretto qui, ma non sono eccessivamente preoccupato per questo.
pre(rel):before ( content: attr(rel); )Incontriamo un piccolo problema nel rendere quello pseudo elemento largo al 100% con imbottitura. Risulta che la nostra dichiarazione di dimensionamento del box sul selettore * non influisce sugli pseudo elementi (ha senso), quindi aggiorniamo la nostra Normalize per includerlo.