Подсветка синтаксиса в блоге на Blogger.com
Поступил мне недавно на электронную почту вопрос — как можно организовать подсветку исходного кода при публикации у себя в блоге? Хочу заметить, что речь сейчас идет о ресурсах, созданных на платформе 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>Вот, в принципе, и все. Еще раз напоминаю адрес страницы проекта.