При публикации на страницах блога программного кода, возникает вопрос его красивого, и главное, доступного, оформления.
Существует множество скриптов и решений данного вопроса, но как организовать подсветку в блоге, размещенном на Blogger.com. Хочу поделиться парой доступных и простых решений, возможно кому то оно окажется полезным.
1. JQuery Sintax Highlight
Первое решение это плагин для яваскриптовой библиотеки JQuery — JQuery Sintax Highlight Plugin. Чтобы подключить данный плагин, для начала, нам понадобится подключить непосредственно саму JQuery библиотеку. Для этого заходим в админку блога, выбираем вкладку «Дизайн» и «Изменить HTML». далее после тегапишем следующее:
Ниже добавляем код подключения плагина с сайта разработчиков:
Теперь для подсветки синтаксиса можно использовать тег
. При чем для разных языков доступны свои варианты подсветки:
default
js code
css code
html code
php code
2. SyntaxHighlighter
Другое решение не предполагает использование JQuery библиотеки, и на этом решении я остановил свой выбор.
SyntaxHighlighter представляет собой полностью функциональный, автономный код подсветки синтаксиса, разработан на JavaScript. Чтобы получить представление о том, на что способен SyntaxHighlighter, достаточно посетить демонстрационную страницу.
Теперь разберемся как это подключить.
Аналогично с первым вариантом заходим в админку блога, выбираем вкладку "Дизайн" и "Изменить HTML". далее в окне редактора шаблона, после тега
<data:blog.pageTitle/> пишем следующее:
После комментария "add brushes here," добавляем скрипты для обработки тех языков, подсветку которых мы хотим использовать. В следующем примере будет использована подсветка для Javascript, SQL, XML/HTML, and PHP: