Насколько я помню, я использовал Google Code Prettify, чтобы применить подсветку синтаксиса к блоку кода в CSS-Tricks. Вы знаете, где в линию , как test , то часть другого цвета , чем testчасти. Это очень полезно для читабельности кода. Это также помогает читателям мгновенно понять, что они смотрят на блок кода (люди любят сканировать статьи, разве не знаете).
В этом новом дизайне мы решили использовать только что выпущенный Prism.js. Он немного легче и быстрее. Он также адаптирован для работы только с HTML, CSS и JavaScript, которые составляют 95% кода CSS-Tricks. Мне также очень нравится, как рационально названы имена классов, используемых для раскраски.
Начинаем разбираться, как именно им пользоваться. Прежде всего, мы говорим CodeKit объединить эту библиотеку в наш глобальный файл JavaScript (который пока пуст, но мы будем писать там код позже). Мы связываем сжатый файл JavaScript в нашей включенной части нижнего колонтитула.
Нам требуется минута, чтобы понять, что вы ничего не «называете», это просто работает, если у вас есть правильные имена классов. В заключение мы немного поиграем с CSS и сделаем код более похожим на CSS-Tricks.