Вставка программного кода в сообщениях в Blogger

Поскольку я программист и блог мой о программировании, у меня возникла необходимость помещать в сообщения отрывки программного кода и подсвечивать синтаксис. Гугл подсказал "копать" в сторону javascript-библиотеки highlight.js.

Библиотека оказалась весьма способная (версия 8.4): не требует подключения дополнительных библиотек (jQuery, MuTools, ...), поддерживает 112 (!) языков программирования, имеет 49 стилей, автоматически определяет языки, и т.д.

Ею я и решил воспользоваться.

Итак, приступим.

На страничке демо подобрал стиль. Мой выбор пал на "Monokai Sublime" (поскольку он очень близок к тому, который я использую в Sublime). Файл стилей называется "monokai_sublime.min.css".

Инструкция highlight.js  сообщает, что для использования нужно подключить на страничку моего блога css-файл со стилем, js-файл со скриптом и скрипт, который запустит саму программу на странице. Этот код выглядит примерно так:

<link href="/path/to/styles/monokai_sublime.min.css" rel="stylesheet"></link>
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/monokai_sublime.min.css" rel="stylesheet"></link>

Вставляем теги в шаблон блога:

1) заходим в админку Blogger. Выбираем в списке блогов нужный и кликаем по его названию;

2) нажимаем на пункт меню "Шаблон";

3) находим на открывшейся странице элемент с названием "Сейчас в блоге", под которым имеется кнопка "Изменить HTML". Нажимаем на нее;

4) в открывшемся редакторе перед </head> вставляем наши теги из последнего листинга;

5) жмем кнопку "Сохранить шаблон".

Использование:

Набираем сообщение, в том числе программный код (в режиме "Создать"). Затем переходим в режим "HTML" и каждый блок кода обрамляем парами тегов <pre><code> слева (перед) и </code></pre> справа (после). Сохраняем.

Важно:

Если вводить сообщение в режиме "HTML", то угловые скобки необходимо экранировать (заменять): "<" на "&lt;", а ">" на "&gt;".

Подробная документация к highlight.js доступна по ссылке.