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

На эту тему довольно много статей есть. При начальной настройке у меня вылазили различные глюки, потому я решил поделиться окончательным решением, которое у меня сейчас работает.

Подсветка синтаксиса использует Java-script библиотеку SyntaxHighlighter

Итак, открываем панель блоггера, переходим в Шаблон › Изменить HTML и находим там строчку такого вида (у вас может быть другая, главное - чтобы были теги <title>):

<title><data:blog.pageTitle/></title>

После этой строчки дописываем следующее:

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript">
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'/>

<script type='text/javascript'>
  SyntaxHighlighter.config.bloggerMode = false;
  SyntaxHighlighter.all();
</script>

Также, чтобы в браузере Google Chrome не было глюков с нумерацией строк, нужно найти строчку:

/* Content
----------------------------------------------- */

И прописать под ней:

.syntaxhighlighter table td.gutter .line
{
    padding: 0 5px !important;
}

Всё, теперь чтобы сделать подсветку кода нужно сделать следующее: во время написания статьи переходим из режима Создать в HTML. и в нужном месте делаем теги и вставляем туда код (например, для подсветки синтаксиса Python):

<pre class="brush:python">
...
</pre>

После brush: указываем язык кода: html, js, css и т. д. А между ними вставляем код. Для питона код можно вставлять "как есть", а вот если код html, то нужно его закодировать html-кодировкой спец символов - для того, чтобы код поспринимался именно как текст, а не как теги. Делается это или вручную :) или с помощью сайтов вроде этого http://www.string-functions.com/htmlencode.aspx