Подсветка кода в блоге

Подсветка синтаксиса кода в блоге на Blogger (blogspot)

Практически каждая запись в it блогах содержит пример кода PHP, HTML, JavaScript
(JS), CSS, SQL (MySQL), shell.
Я нашел несколько способов, как подсветить исходный код. Но мне не устраивало, то, что в этих решениях нужно было вставлять inline css стили в пост и скачивать на компьютер файлы для генерации HTML кода. В других вариантах оформления программного кода нужно было подключать 2-6 JS файлов которые расцвечивали код автоматически по определенному тегу. Но здесь нет возможности контролировать какой язык будет выбран при автоматическом "раскрашивании" и страница начинает загружаться существенно дольше.


В итоге я пришел к решению которое позволило мне размечать куски кода очень просто.
tools.webgloss.ru/hl/ - этот онлайн-сервис предназначенный именно для этого.

Как пользоваться:
1. Для начала настроим наш блог.

В blogger панели заходим в пункт меню Дизайн - вкладка Изменить HTML.

на вопрос системы отвечаем Приступить:

Теперь мы должны вставить мета-тэг в самое начало перед штриховой линией:
"------------------------
Blogger Template Style
Вставляем тег:

<link rel="stylesheet" href="http://yandex.st/highlightjs/7.2/styles/github.min.css" />

Нажимаем "Сохранить шаблон"
2. Теперь перейдем нас страницу сервиса tools.webgloss.ru/hl/

• Выбираем язык программирования на котором написан подсвечиваемый код
• В первое поле вставляем код
• Нажимаем кнопку “Преобразовать”
• Под полем смотрим получившийся вариант форматированного кода
• Копируем код с HTML разметкой из второго поля
• Возвращаемся в свой блог
• Выбираем редактирование с режиме HTML
• Вставляем скопированный код в текст поста

Смежная статься Как подтвердить права на Blogger (blogspot) в Яндекс.Вебмастер