Току-що инсталирахме Prism.js и го включихме.
В този скринкаст намираме тема, наречена Tomorrow Theme, и вграждаме нейните цветове в подчертаването на синтаксиса. Правим малък цветен ключ в горната част на файла за бърза справка. Също така правим някои предположения какво е какво, поне да започнем. Това, с което завършваме, цветно, е ОК, но не и грандиозно. Ако днес разглеждате сайта, ще забележите, че цветната тема е по-скоро като Twilight, която преди обичах в TextMate, а в момента обичам в Sublime Text 2.
Завършваме, като добавяме заглавните ленти към кодови фрагменти. Нямаме действително маркиране, което прави това (което вероятно е добре, това е най-вече просто декоратор), ние го добавяме чрез използване на псевдо елемент и генерирано съдържание чрез relатрибута на кода. Повечето от съществуващия код на CSS-трикове имат този атрибут. Ако не стане, не е голяма работа. Тук всъщност не използваме relпо правилния начин, но не се притеснявам прекалено за това.
pre(rel):before ( content: attr(rel); )Сблъскваме се с малък проблем с превръщането на този псевдоелемент в ширина 100% с подплата. Оказва се, че нашата декларация за оразмеряване на полето на селектора * не засяга псевдоелементите (доста логично), така че актуализираме нашата нормализация, за да включим това.