Highlight.js на БЭМ-стеке

Форум /

БЭМ-проекты теперь могут легко использовать знаменитый Highlight.js для посветки кода, подключив библиотеку bem-highlight.js.

Библиотека предоставляет блок highlight с CSS, JavaScript и BEMHTML реализацией. Больше не нужно вручную подключать дополнительные файлы, всё собирается по БЭМ. Есть широкие возможности переопределения на своём уровне
Блоки кода независимы, для их подсветки можно использовать разные цветовые схемы, даже если всё в рамках одной страницы.

Библиотека совместима с bem-core, используется новая модульная система.

Пример использования на живом проекте можно посмотреть у меня в блоге.

Конечно, планируется развитие и в обозримом будущем — пост об особенностях реализации. Но похвастаться захотелось уже сейчас

funca

расскажи в двух словах, в чем отличие от реализации Сагалаева, и где профит?

например, вижу что перепилены темы:

https://github.com/varya/bem-highlight.js/blob/master/blocks/highlight/_theme/highlight_theme_monokai.css

https://github.com/isagalaev/highlight.js/blob/master/src/styles/monokai.css

- .lisp .hljs-title,

+ .highlight_theme_monokai pre .lisp .title,

что дало на выходе вместо:

 class="html">...

конструкцию вида:

  
 
BEM это все еще html или уже какой-то совсем другой язык?

toivonens

Отличие в том, что это БЭМ-блок. Хотя слово "отличие" тут слабо применимо. Код Highlight.js у меня не изменен, взят как есть, просто добавлена БЭМ-обертка. В результате не нужно вручную подключать CSS и JS.

Кроме того, я обернула темы модификаторами, что позволяет их использовать на одной странице. И есть BEMHTML шаблон для производства HTML.

Написан иницилизационный JS, позволяющий переопределения в рамках проекта (так сделано у меня в блоге) или для контретного блока (если пользователь напишет свой модификатор).

toivonens

Хотя ты прав, можно сделать блок на

, а не на . Я сделала на , потому что markdown так генерируется. Надо будет переделать в версии 0.1.0 
toivonensИ class="html">...
не будет работать с чистым Highlight.js. Только
 class="xml">...
 А я предлагаю пользователям элегантный хак! (И для js -> javascript тоже)
funca
кстати про маркдаун, все руки не как не дойдут. основная заморочка с генераторами html из маркдауна - сложность кастомизации html результирующего кода. как правило шаблонизация зашита в JS и плохо отделима. вот тут бы ситема шаблонов на BEM(HTML) могла сильно пригодиться.
я посмнтрел несколько библиотек. наиболее адекватным показался https://github.com/evilstreak/markdown-js , парсер которого может генерировать промежуточное представление в виде нечто, под названием JsonML (поидее сильно похоже на BEMJSON), из которого оное дерево генерится на раз. 
toivonens
Это круто, но к случаю блога на Jekyll это всё неприменимо. Хотя эта штука может быть полезной, если делать БЭМ-блог на базе Docpad, например. Надо посмотреть получше.
funca
у меня есть давнешняя навязчивая идея - реализовать часть Jakyll на стеке bem-инструментов. кажется, задача состоит целиком из кейсов про сборку, шаблонизацию и кастомизацию. если bem-инструменты и правда покрывают эти кейсы, как заявляется адептами, то все должно быть просто. но простого решения пока не получается.
pavelsilinw
Здорово, все сам хотел что-то подобное написать, но ни как руки не доходили )
tadatuta
предлагаю в отдельной теме в клубе обсудить что именно вызывает затруднения, наверняка совместно сможем придумать решение.