HOW YOU CAN SUPPORT UKRAINE

Онлайн заработок, создание и монетизация сайтов, веб-разработка, SEO и SMO продвижение, фриланс, партнерки, полезные сервисы вебмастерам, блоггинг.

Подсветка синтаксиса в блоге на 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>

Вот, в принципе, и все. Еще раз напоминаю адрес страницы проекта.

13.08.08

Категории: Blogger.com (Blogspot).

Теги: , ,

Добавить комментарий

Ваш e-mail не публикуется. Обязательные поля помечены *
Если вы комментируете впервые, то текст будет отправлен на модерацию.