09 января 2008

Подсветка синтаксиса кода в блоге

Недавно задумался - а чем же сделать эту самую подсветку? Пробегал на хабре топик про
javascript библиотеки для данных целей. Но для блога данный способ совершенно не подходит, ибо стандарт RSS ни о каком css знать не знает.
в репозитарии нашлась пара обработчиков исходного кода ( app-text/highlight и dev-util/source-highlight) разной степени паршивости. Первый почему-то не подсвечивал закрывающие круглые скобки, второй - пропускал кучу всего из коробки, а перекрывать свои настройки пользовательскими не хотел (а жаль, славная бы вышла каскадная таблица стилей...) И всё не давало покоя чувство, что кто-то же это умел красивее подсвечивать...
А лучше и полнее это умеет делать Vim. Заодно он умеет выдавать валидный html с подсветкой. Но только целиком, от DOCTYPE и до самого </html> Пришлось закатать рукава и немного изменить стандартный плагин, в результате получился у меня свой плагин (класть в ~/.vim/plugin), заточенный под тёмные темы. По комманде :TOblog формирует необходимый html, помещает его в новый буфер и копирует в буфер обмена , остаётся только вставить. Например, так


33     " change body to div vith inline style

34     :silent :%s/<body[^<]*>/<div id="code" style="background-color:#333333; color:#ffffff">/

35     :silent :%s/<\/body>/<\/div>/

36     " and delete crap around it

37     :exe "normal gg"

38     :call search("<div id=\"code\"[^>]*>")

39     :exe "normal kdgg"

40     :call search("<div id=\"code\"[^>]*>")

41     :exe "normal w%jdGygg"



А чтобы хорошо смотрелось, можно поправить fg и bg.

UPD: В комментариях jetxee развивает мою мысль и предлагает свой вариант.

10 комментариев:

Павел Вязовой комментирует...

Я использую отличную платформу для приложений под названием Emacs.
И у меня есть программа htmlize.el =) Она выдает html-код буфера таким, каким я его вижу.
Посмотреть результат её работы можно в этом посте:
http://vyazovoi.livejournal.com/61574.html?nc=6

А ещё там клевые клиенты для джаббера, irc, nntp и email

PhoeniX комментирует...

А ещё недавно в операционной системе Emacs появился неплохой редактор ;)
Никогда этого не понимал. Это вообще удобно? Кстати, давайте ссылку - будет антихоливорный пост для равновесия. Или сами напишите.

ze0n комментирует...

Недавно, гугля на схожую тему, наткнулся на такой вот линк:
Online syntax highlighting
http://tohtml.com/

В принципе юзать удобно, всегда доступно.
В минус можно отнести - небольшое количество стилей подсветки

PhoeniX комментирует...

да, для личностей, менее маргинальных, чем я или Павел, наверное, удобно.
Уже после того, как закончил писать пост, подумал - а в чём преимущества моего способа? В том, что твоя любимая цветовая схема. В том, что код открыт в чём? Конечно, в твоём любимом редакторе. И в буфер обмена копируется само...

Анонимный комментирует...

Клёвая идея! Мне очень понравилось. Большое преимущество перед другими вариантами добавить подсветку кода в HTML — много поддерживаемых синтаксисов для подсветки (не ограничивается десяткой популярных веб-языков вроде Javascript).

Только сделал маленькие поправки:

* добавил опцию, чтобы можно было оставлять конечные <br> (полезно, если постить не в blogger или просто в браузере просмотреть)
* также удаляю </html> на конце

toblog.vim (modified)

PhoeniX комментирует...

подсвети исходники свои и они ещё не раз к тебе вернутся ;) Спасибо за дополнения.

Павел Вязовой комментирует...

Привет, только сейчас получил уведомление о комментарии и увидел, что пропустил ответ мне.

Никогда этого не понимал. Это вообще удобно? Кстати, давайте ссылку - будет антихоливорный пост для равновесия. Или сами напишите.

Я не понял, ссылку на что? Или о чём написать?

PhoeniX комментирует...

на аналог в емаксе. о том, как емакс бороздит просторы^W^W делает то же самое, только лучше ;)

Павел Вязовой комментирует...

Ну я уже сказал про htmlize.el
Это программа на elisp, следовательно исполняется в емаксе.
Она экспортирует нужный буфер, регион, или несколько файлов сразу в html с текущей раскраской синтаксиса и фона.

При выполнении создает новый буфер с html. Если надо - можно и в буфер обмена скопировать содержимое буфера (тут огромный плюс то, что емаксеры народ избранный и, как правило, знают лисп чтобы творить с емаксом то, что нужно).

В настройках (M-x customize-group RET htmlize) можно настроить много чего, например:
- тип экспорта - css, inline-css (style непосредственно в тегах) и без css
- нужно ли автоматически создавать ссылки из написанных текстом url и email
- кодировка
И некоторые другие вещи.

Lazy Quill-driver комментирует...

А как из консоли вызвать обработку нужного файла вимом с этим плагином в неинтерактивном режими? Чтобы результат обратно в консоль получить.