Syntax highlighter для blogger

1. Открываете в блогспоте вкладку "Дизайн". Снизу в footer добавляете гаджет "HTML/Javascript" с содержимым:

<!-- syntax hightlight -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/vs.min.css" />
<style>
pre>code {padding: 1em; border: 1px solid #aaa; display: block; overflow-x: auto;}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Сохраняете.

2. Во время редактирования поста переходите на вкладку HTML и там пишите:

<pre><code> тут код, который нужно раскрасить </code></pre>

Скрипт сам постарается определить язык программирования. Если хотите, то можете указать его явно. Для этого укажите класс в теге <code class="javascript">. Названия поддерживаемых языков находятся в документации.

Если хотите отключить раскрашивание, то указываете класс "nohighlight".

Если хотите раскрасить html, то в блоггере на вкладке "Создать" вставляете html код, нажав ctrl+shift+v. Затем переходите на вкладку HTML и там обрамляете получившийся код (со всеми этими &lt; и &gt;) тегами <pre><code class="html"> ... </code></pre>.

Для всего этого используется библиотека highlightjs.org. Заходите в ее демку, чтобы узнать какие языки поддерживаются и выбрать подходящий стиль раскраски.

3. Если пишите посты в блоггере через вкладку "Создать", то когда вы будете отделять пустыми строками блоки с кодом, то блоггер будет добавлять лишние пустые строки. Чтобы этого избежать, нужно убрать пустые строки над и под блоками с кодом. Можно так же во вкладке HTML удалить лишние <br> вокруг блоков с кодом. В редакторе блоггера пост будет выглядеть примерно так: