Highlight.js - подсветка кода в блоге

Для подсветки синтаксиса (кода выкладываемого в статье) можно использовать разные скрипты, например, напремер, SyntaxHighlighter или SHJS.
Есть ещё один интересный и известный скрипт - highlight.js. Его работу можно оценить на Хабре:
простой серенький фон, красивое сочетание цветов, отсутствие нумерации строк. Короче говоря, ничего лишнего.
Для Blogger и Yoom CMS я решил "угнать" стили с Хабра. На самом деле на официальном сайте выложено довольно много самых разнообразных вариантов оформления это скрипта, но мне лень было искать именно тот =).

Демо с оформление css кода с помощью highlight.js:

pre code {
 font-size: 12px;
 padding: 0.5em;
 background: #f8f8f8;
 display: block;
 }
 pre .subst,
 pre .title {
 font-weight: normal;
 color: #000;
 }

Установка highlight.js в Blogger.
На странице загрузки можно скачать архив, где будет лежать инструкция по подключению, стили и скрипты, расчитанные на определённые языки программирования/веб-разработки, и упакованные в highlight.pack.js. Но это не нужно.
На той же странице загрузки архива можно узнать, что highlight.js лежит в репозиториях скриптов Яндекса, что удобнее вдвойне:

• надёжный хост
• благоприятная ссылка

Поэтому не будем изобретать велосипеды со своим хостингом и подключим в своём шаблоне (перед тегом </head>) сам скрипт:

<script src="http://yandex.st/highlightjs/6.1/highlight.min.js">
</script>

Ещё один скрипт вызова:

<script type="text/javascript">
 hljs.initHighlightingOnLoad();
</script>

И хабро-стили для highlight.js:

<link href="highlight.css" rel="stylesheet"></link>

Для которых как раз понадобится ваш собственный велосипед (хостинг).

Использование highlight.js в статье.
Highlight.js, как и другие подобные скрипты, использует вариацию тега pre, но в данном случае вместе с тегом code, и автоматически понимает язык выкладываемого кода:

<pre><code>...</code></pre>

О том, как правильно вставить html код в статью Blogger читаем здесь.

Ссылки по теме:
Скрипт показа исходного кода страницы в блоге.