Форматирование кода в постах при помощи SyntaxHighlighter

Буквально недавно, когда только начал вести блог на этой платформе, искал возможность форматирования различных code snippets.

Тогда я нашел сторонний бесплатный сервис Pastie. Штука удобная, но имеет несколько недостатков.

Во-первых, для того чтобы можно было вставить отформатированный код в блог нужно использовать их код embed, а код этот будет работать только в случае, если код был опубликован на их сайте в публичном виде.

Во-вторых, если нужно что-то поправить в коде, то нужно создавать новый сниппет и получать новый код для вставки на свой сайт. Т.е. редактирования там не предусмотрено.

В-третьих, при вставке кода при помощи Pastie не соблюдается верстка сайте, где этот код вставляется. Т.е. если в коде используются длинные строки, то embed либо растянет все верстку блога, либо же перекроет другие элементы.

Ну и, наконец, я редко доверяю сторонним сервисам, особенно когда речь идет о бесплатных плюшках. Сегодня он есть, завтра там что-то поменялось или вообще проект закрылся. В результате мой контент пропал. А мне важно, чтобы у меня был доступ к контенту и через несколько лет. В конце концов, речь же идет о различных шпаргалках.

Я давно знал о SyntaxHighlighter и даже использовал его в блогах на Wordpress, где этот функционал реализован в виде плагина.

Сейчас же я веду блог на платформе Blogger и здесь с плагинами туго. Многие вещи нужно внедрять на уровне шаблона. В принципе, это не сильно сложно, тем более что один раз внедрил и забыл об этом.


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

Как добавить возможность подсветки синтаксиса при помощи SyntaxHighlighter в Blogger

Необходимо зайти в редактирование шаблона блога (Таб Layout или Шаблон, в зависимости от языка интерфейса блога) и открыть его в виде HTML (Edit HTML или Изменить HTML).

Находим закрывающий тег и непосредственно перед ним копируем следующие строки:

Здесь есть 2 важных момента.
После строки необходимо добавить библиотеки для подстветки тех или иных синтаксисов.
Так как для моей работы необходим лишь синтаксис для языков программирования в вебе и Linux Bash, я добавляю только эти библиотеки

Полный же список библиотек можно найти на сайте разработчика.

Второй момент, это строка

SyntaxHighlighter.config.bloggerMode = true;

В принципе, подсветка будет работать и без нее, но раз уж разработчик предоставляет возможность интеграции специально заточенной под платформу Blogger, то почему бы ей не воспользоваться.

Как работать с SyntaxHighlighter в Blogger

Работать со сниппетами кода можно только в режиме HTML.
Берем сниппет и помещаем его в тег < pre > где class будет использовать нужный нам синтаксис. В примере ниже я использую для подсветки синтаксис HTML.

service mysql stop
mv /var/lib/mysql/ib_logfile0 /var/lib/mysql/ib_logfile0_bak
mv /var/lib/mysql/ib_logfile1 /var/lib/mysql/ib_logfile1_bak
service mysql stop

Ну и, результат работы SyntaxHighlighter можно видеть прямо в этом посте.