Per quanto posso ricordare, ho utilizzato Google Code Prettify per applicare l'evidenziazione della sintassi sul blocco di codice su CSS-Tricks. Sai, dove in una riga come test , la parte è di un colore diverso dalla testparte. Questo è molto utile per la leggibilità del codice. Aiuta anche i lettori a capire immediatamente che cosa stanno guardando è un blocco di codice (alle persone piace scansionare gli articoli, non lo sai).
In questo nuovo design, decidiamo invece di utilizzare Prism.js appena rilasciato. È un po 'più leggero e veloce. È anche progettato per funzionare solo con HTML, CSS e JavaScript, che è il 95% del codice su CSS-Tricks. Mi piace anche molto il modo in cui i nomi delle classi usati per colorare sono razionalmente nominati.
Iniziamo a capire come usarlo esattamente. Prima di tutto, diciamo a CodeKit di concatenare questa libreria nel nostro file JavaScript globale (che finora è vuoto, ma scriveremo il codice più tardi). Colleghiamo il file JavaScript compresso nella nostra parte del piè di pagina inclusa.
Ci vuole un minuto per capire che non c'è niente che "chiami", funziona solo supponendo che tu abbia i nomi di classe corretti. Finiamo giocando un po 'con il CSS e facendo sembrare il codice più simile a quello che ha sempre su CSS-Tricks.