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