Поступил мне недавно на электронную почту...

Поступил мне недавно на электронную почту вопрос – как можно организовать подсветку исходного кода при публикации у себя в блоге? Хочу заметить, что речь сейчас идет о ресурсах, созданных на платформе Blogspot (Blogger. com). Кстати, некоторое время назад я рассматривал данный вопрос на другом своем проекте, но тема касалась движков Wordpress. Задача решилась достаточно просто – установкой специального плагина. Но как быть с Blogger`ом?! На помощь приходит отечественная разработка – Highlight. js. Скрипт используется для подсветки исходного кода на любых веб-страницах. Он работает автоматически, поэтому особой сложности возникнуть не должно. Поддерживается достаточно большое число языков, от C++ до Ruby, от 1С до SQL и т. д. Скачать архив скрипта можно на странице описание или здесь. Итак, чтобы установить данный скрипт на сайт, заходим в раздел «Макет» – «Изменить HTML» и вставляем перед следующий код:

 initHighlightingOnLoad(); 

После этого сохраняем шаблон. Следует заметить, что автоматическое распознавание может работать медленно из-за большого числа включенных языков и обширных размеров исходного кода. Чтобы ускорить процесс можно в вызывающей функции указать лишь нужные вам языки:

 initHighlightingOnLoad('html','php','css'); 

В процессе работы скрипт ищет на странице конструкции с кодом

...

, выделяя и помечая отрывки кода специальными классами. Поэтому в стилях нужно добавить для каждого из них оформление, например:

.comment { color: gray; } .keyword { font-weight: bold; } .html. atribute. value { color: green; }

Если вы скачали архив скрипта, то в папке styles можете найти примеры оформления default.

css, dark. css и т. д. Код из этих файлов можно поместить в шаблон вашего блога там где описаны другие стили. Напоследок хотелось бы сказать немного слов о способе распознавания кода. Скрипт пытается обработать фрагмент всеми языками подряд, после чего считает число подошедших вариантов. Для какого языка нашлось больше всего синтаксических конструкций и ключевых слов – тот и выбирается. Понятно, что данный метод далеко не всегда срабатывает правильно, поэтому авторами предусмотрена возможность указать язык приведенного кода вручную.

Поступил мне недавно на электронную почту...

Нужно просто вписать его название в виде класса:


...

Если вы хотите запретить обработку фрагмента – используйте следующую конструкцию:


...

Вот, в принципе, и все. Еще раз напоминаю адрес страницы проекта. P. S. Я уже говорил о конкурсе граватарок с призовым фондом в $50. Параллельно запустил еще один – бесплатная баннерная реклама для блогов. Каждый блог может получить размещение собственного баннера на 1-2 месяца. Единственное условие – баннеры рисуют сами авторы:) Читаем подробнее и принимаем участие.

Понравилась статья? Получай обновления и будь всегда в курсе событий!
Подпишись на RSS или
blog comments powered by Disqus