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

среда, 13 августа 2008 г.
Поступил мне недавно на электронную почту вопрос - как можно организовать подсветку исходного кода при публикации у себя в блоге? Хочу заметить, что речь сейчас идет о ресурсах, созданных на платформе Blogspot (Blogger.com). Кстати, некоторое время назад я рассматривал данный вопрос на другом своем проекте, но тема касалась движков Wordpress. Задача решилась достаточно просто – установкой специального плагина. Но как быть с Blogger`ом?!

На помощь приходит отечественная разработка - Highlight.js. Скрипт используется для подсветки исходного кода на любых веб-страницах. Он работает автоматически, поэтому особой сложности возникнуть не должно. Поддерживается достаточно большое число языков, от C++ до Ruby, от 1С до SQL и т.д. Скачать архив скрипта можно на странице описание или здесь.

Итак, чтобы установить данный скрипт на сайт, заходим в раздел «Макет» - «Изменить HTML» и вставляем перед </head> следующий код:
<script type="text/javascript" src="http://softwaremaniacs.org/js/highlight.js"></script>
<script type="text/javascript">
initHighlightingOnLoad();
</script>
После этого сохраняем шаблон.
Следует заметить, что автоматическое распознавание может работать медленно из-за большого числа включенных языков и обширных размеров исходного кода. Чтобы ускорить процесс можно в вызывающей функции указать лишь нужные вам языки:
<script type="text/javascript">
initHighlightingOnLoad('html','php','css');
</script>
В процессе работы скрипт ищет на странице конструкции с кодом <pre><code>...</code></pre>, выделяя и помечая отрывки кода специальными классами. Поэтому в стилях нужно добавить для каждого из них оформление, например:
.comment {
color: gray;
}

.keyword {
font-weight: bold;
}

.html .atribute .value {
color: green;
}
Если вы скачали архив скрипта, то в папке styles можете найти примеры оформления default.css, dark.css и т.д. Код из этих файлов можно поместить в шаблон вашего блога там где описаны другие стили.

Напоследок хотелось бы сказать немного слов о способе распознавания кода. Скрипт пытается обработать фрагмент всеми языками подряд, после чего считает число подошедших вариантов. Для какого языка нашлось больше всего синтаксических конструкций и ключевых слов – тот и выбирается. Понятно, что данный метод далеко не всегда срабатывает правильно, поэтому авторами предусмотрена возможность указать язык приведенного кода вручную. Нужно просто вписать его название в виде класса:
<pre><code class="html">...</code></pre>
Если вы хотите запретить обработку фрагмента – используйте следующую конструкцию:
<pre><code class="no-highlight">...</code></pre>
Вот, в принципе, и все. Еще раз напоминаю адрес страницы проекта.

P.S. Я уже говорил о конкурсе граватарок с призовым фондом в $50. Параллельно запустил еще один – бесплатная баннерная реклама для блогов. Каждый блог может получить размещение собственного баннера на 1-2 месяца. Единственное условие – баннеры рисуют сами авторы:) Читаем подробнее и принимаем участие.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   
Related Posts with Thumbnails