Мы только что установили Prism.js и все заработало.
В этом скринкасте мы находим тему под названием Tomorrow Theme и подчеркиваем ее цвета подсветкой синтаксиса. Мы делаем небольшой цветной ключик вверху файла для быстрого ознакомления. Мы также делаем некоторые предположения относительно того, что к чему, по крайней мере, для начала. То, что у нас получается с точки зрения цвета, нормальное, но не впечатляющее. Если вы просмотрите сайт сегодня, вы заметите, что цветовая тема больше похожа на Twilight, которую я любил в TextMate, а сейчас мне нравится Sublime Text 2.
Мы заканчиваем добавлением полос заголовков к фрагментам кода. У нас нет фактической разметки (что, вероятно, хорошо, в основном это просто декоратор), мы добавляем ее с помощью псевдоэлемента и сгенерированного контента с помощью relатрибута в коде. Большая часть существующего кода CSS-Tricks имеет этот атрибут. Если нет, не беда. На самом деле мы здесь relнеправильно используем, но меня это не особо беспокоит.
pre(rel):before ( content: attr(rel); )У нас возникла небольшая проблема с тем, чтобы сделать этот псевдоэлемент 100% шириной с помощью padding. Оказывается, наше объявление размера блока в селекторе * не влияет на псевдоэлементы (в некотором роде имеет смысл), поэтому мы обновляем нашу Normalize, чтобы включить это.