Подсветка синтаксиса для блога

Многим людям, пишущим технические статьи для Веб часто требуется подсветка синтаксиса в блоках кода на страницах. Желательно, чтобы она была реал-таймовая (javascript) иначе дополнительное "раскрашивание" собственного кода может напрочь загубить всякое желание что-либо писать.

Погуглив по интернету, нашел сравнительно небольшой javascript-модуль, который не страшно втиснуть непосредственно на страницу.

Для начала определим стили для подсветки. Каким шрифтом, цветом будут выводиться комментарии, каким строки, какая будет подсветка синтаксиса для функций.

Правила CSS для подсветки:

/* Syntax Highlighting */
  .S{color:green} /*Строки*/
  .func{color:blue}/* Юзер-функции синие */
  .C{color:orange}/* Комменты оранжевые */
  .kwrd{font-weight:bold}/* Ключевые слова полужирные */
  .R{color:gray}
  .xml{color:red;}

Сам javascript-модуль для подсветки синтаксиса дам подкатом. В uncompressed-виде он довольно объёмный. Вот тут-то мне и пригодится инструмент для конвертации HTML кода.

javascript для подсветки синтаксиса:

<script type="text/javascript">
function syntax(code){
    var comments    = [];        // Тут собираем все каменты
    var strings     = [];        // Тут собираем все строки
    var res         = [];        // Тут собираем все RegExp
    var all         = { 'C': comments, 'S': strings, 'R': res };
    var safe        = { '<': '<', '>': '>', '&': '&' };

    return code
        // Маскируем HTML
        .replace(/[<>&]/g, function (m)
            { return safe[m]; })
        // Убираем каменты
        .replace(/\/\*[\s\S]*\*\//g, function(m)
            { var l=comments.length; comments.push(m); return '~~~C'+l+'~~~'; })
        .replace(/([^\\])\/\/[^\n]*\n/g, function(m, f)
            { var l=comments.length; comments.push(m); return f+'~~~C'+l+'~~~'; })
        // Убираем regexp
        .replace(/\/(\\\/|[^\/\n])*\/[gim]{0,3}/g, function(m)
            { var l=res.length; res.push(m); return '~~~R'+l+'~~~'; })
        // Убираем строки
        .replace(/([^\\])((?:'(?:\\'|[^'])*')|(?:"(?:\\"|[^"])*"))/g, function(m, f, s)
            { var l=strings.length; strings.push(s); return f+'~~~S'+l+'~~~'; })
        // Выделяем ключевые слова
        .replace(/(var|function|typeof|new|return|if|for|in|while|break|do|continue|switch|case)([^a-z0-9\$_])/gi,
            '<span class="kwrd">$1</span>$2')
        // Выделяем скобки
        .replace(/(\{|\}|\]|\[|\|)/gi,
            '<span class="gly">$1</span>')
        // Выделяем имена функций
        .replace(/([a-z\_\$][a-z0-9_]*)[\s]*\(/gi,
            '<span class="func">$1</span>(')
        // Возвращаем на место каменты, строки, RegExp
        .replace(/~~~([CSR])(\d+)~~~/g, function(m, t, i)
            { return '<span class="'+t+'">'+all[t][i]+'</span>'; })
        // Выставляем переводы строк
        .replace(/\n/g,
            '<br/>')
        // Табуляцию заменяем неразрывными пробелами
        .replace(/\t/g,
            '&nbsp;&nbsp;');
}
</script>

Скрипт взят отсюда: скрипт подсвечивающий себя сам

Для вызова обработчика вам понадобится примерно следующий код.
Замечание: У меня все вставки кода находятся в тегах <pre>. Если у вас для этого используется, например, другой тег, но с каким-то определенным классом, то вместо getElementsByTagName используйте getElementsByClass.

javascript для вызова обработчика:

<script type="text/javascript">
var els = document.getElementsByTagName('pre');
for (var j=0; j < els.length; j++) {
  var elt = (els[j]);
  elt.innerHTML = syntax(elt.innerHTML);
}
</script>

Как добавить подсветку синтаксиса в Blogger?

1. CSS. Добавьте приведенные выше CSS-инструкции в ваш шаблон.
Настроить - Макет - Изменить HTML
Если затрудняетесь найти, где у вас в шаблоне расположены CSS-инструкции, просто вставьте перед строкой ]]></b:skin>

2. Добавление первого блока javascript.
Настроить - Макет - Элементы страницы
В самом низу страницы нажмите "Добавить гаджет" и выберите HTML/JavaScript

3. Добавление второго блока javascript. То же самое, что и для первого.
Внимание: блоки (гаджеты) должны располагаться в том же порядке, как они расположены в этом сообщении - "первый" над "вторым".

P.S. Гораздо естественнее было бы их вставить одним блоком или даже прописать непосредственно в шаблоне, но по непонятным причинам Blogger мне этого сделать не позволил.