Подсветка синтаксиса на Blogspot

Часто в статьях приходится выкладывать код, но в редакторе Blogspot к сожалению нет функции вставки кода. Поэтому приходится воспользоваться сторонними решениями. В рунете много статей посвящены способу интеграции JavaScript библиотеки "SyntaxHighlighter by Alex Gorbatchev" с Blogspot. Эта библиотека позволяет с подсветкой синтаксиса отображать большое количество языков, например: Javascript, Bash, SQL, XML/HTML, PHP и C++. Я также выбрал этот способ и постараюсь изложить краткую инструкцию.

И так приступим:

В начале обязательно нужно сделать бекап шаблона, так как мы в него будем добавлять код (на случай если вы что-то напутаете). Для этого в верхней панели вашего блога нужно выбрать вкладку "Дизайн",  затем вкладку "Изменить HTML". Кликнуть по ссылке "Загрузить весь шаблон", чтобы сохранить текущую копию шаблона (xml) на ваш носитель. В новой версии панели настроек "Дизайн" - "Управление" - "Загрузить шаблон полностью".

Для того чтобы добавить поддержку подсветки синтаксиса, в настройках шаблона, выбираем "Изменить HTML" и ищем тег </head>. В конце перед кодом </head> добавляем скрипт:

Сохраняем шаблон и переходим к созданию нового сообщения. Для того чтобы подсветить код нам потребуется в режиме "Изменить HTML" воспользоватся следующим синтаксисом:

#!/bin/bash
mkdir thumbs880
for f in *.jpg; do
convert $f -resize 880 thumbs880/${f%%jpg}jpg
done

В результате должно быть отображено так (только после публикации материала, так как в редакторе подсветка не отображается):

#!/bin/bash
mkdir thumbs180
for f in *.jpg; do
convert $f -resize 180 thumbs180/${f%%jpg}jpg
done

В листинг внутри тега <pre> задавайте нужный стиль. Например, для php будет выглядеть так, <pre class="brush: php"> для вставки кода терминала <pre class="brush: bash">.
Иногда придется заменять символ "<" на его код "&lt;", код ">" на код "&gt;".
Полный список поддерживаемых языков смотрите а сайте разработчика библиотеки.