Оформление кода в блоге

Долго мучился с поиском более-менее удобного метода вставки блоков кода в данный блог.
Был неприятно удивлен отсутствием в принципе данной функции в механизме самого ресурса www.blogger.com.
Однако, решения есть. Но описание их настолько неоднозначное, что потратил пол дня, чтобы "методом тыка" добиться хоть какого-то результата.
Поэтому себе на память и всем, кто ищет решения аналогичной проблемы, излагаю рабочее решение (см.ниже).

1. Выбираете из выпадающего списка необходимый блог (тем, кто не знает - их может быть несколько):

2. В меню свойств (слева) выбираем раздел "Тема", а в ней (справа) нажимаем кнопку "Изменить HTML":

3. В открывшемся окне с HTML-кодом шаблона темы, которая будет применяться ко всем сообщениям в данном блоге, необходимо добавить стили и скрипты для обработки блоков текста, содержащие публикуемый код.

3.1. Сразу после тэга <title>[...]</title> (обязательно перед закрывающим тэгом </head>) вставляем ссылки на CSS-стили (где их взять - см.ниже):

?

1 2 3 4

<title><data:blog.pageTitle/></title>    <link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.css' rel='stylesheet' type='text/css'/>  <link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

3.2. Перед закрывающим тэгом </body> вставляем ссылки на необходимые JS-скрипты:

?

1 2 3 4 5 6 7 8

<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js' type='text/javascript'> </script> <script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.js' type='text/javascript'> </script> <script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js' type='text/javascript'> </script> <script type='text/javascript'>      SyntaxHighlighter.all(); </script>   </body>

Важно! Тэг <script> должен обязательно закрываться тэгом </script>, а так как сайт www.blogger.com самостоятельно удаляет закрывающий тэг, заменяя его короткой формой <script ....  />, если между открывающим и закрывающим тэгом ничего нет, то необходимо вставить пробел между ними (как в примере).
4. Использование.
4.1. В режиме HTML редактирования статьи (сообщения)

добавляем тэг <pre></pre> следующего содержания:

?

1 2 3

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

4.2. В имени класса, после двоеточия прописываем тип вставляемого кода - "js", как в данном примере, для кода JavaScript, "xml" - для кода XML, "java" - для кода на Java и т.д. Сокращения можно взять отсюда.
4.3. Между открывающим <pre> и закрывающим </pre> тэгами вставляем необходимый код.
Важно! Перед вставкой кода обязательно заменить угловые скобки на esc-последовательности. Для этого можно воспользоваться, например, данным сайтом (вставляете свой код, как он есть и нажимаете кнопку "Convert to esceped characters", копируете результат и его уже вставляете в HTML блога).

5. Ссылки на необходимые в п.3 стили и скрипты можно взять с данного сайта.
Ключевые стили - это shCore.css и shThemeDefault.css, как в примере и данном блоге. Можно поиграть с другими темами и выбрать другую понравившуюся. Также можно выбрать сжатые файлы стилей, соответственно, shCore.min.css и shThemeDefault.min.css.
На этом же сайте можно найти ссылки на необходимые скрипты (простые и сжатые) для обязательного shCore.js (или shCore.min.js), а также различных типов кода shBrushJScript.js и shBrushXml.js (как в примере - для JavaScript и XML кода), shBrushPython.js - для Python, shBrushPhp.js - для PHP и т.д.
Ссылки на файлы скриптов можно добавлять несколько, по необходимости - в зависимости от того, какие куски кода планируется постить в блоге.
Обязательно не забудьте поставить после ссылок на необходимые скрипты скрипт, непосредственно выполняющий преобразование стиля вставляемого кода:

?

1 2 3

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

(☀) Пока писал этот блог, наткнулся на более элегантное решение - gist от github.com
Просто создаете на github.com (естественно, предварительно зарегистрировавшись) свой gist с необходимым кодом. После этого выбираете Embedded и копируете одну строку, которая будет выводить содержимое вашего кода, и вставляете ее в необходимое место своего блога (в режиме HTML):