22 июля 2010 г.

Подсветка кода в блогах на blogger.com

Захотелось сделать посты в своем блоге более привлекательными и юзабильными, поэтому и решил добавить подсветку в примерах кода.
Изучение Google.com и проба нескольких решений привела к следующему результату.
SyntaxHighlighter - это полнофункциональный самостоятельный скрипт подсветки синтаксиса (code syntax highliter) поддерживающий кучу языков, имеющий удобный небольшой тулбарчик с кнопками, позволяющими выводить исходник в отдельном окне, копировать его в буфер обмена или печатать. Теперь не надо после копи-паста удалять на каждой строчке лишние символы. Скрипт абсолютно мультиплатформенный и может работать в любом блоге хоть в WordPress, хоть в Joomla!, хоть в Blogger.com.
Как же установить SyntaxHighlighter в свой блог на blogger.com.
1. Заходим в админку своего блога.
2. Нажимаем Дизайн - Изменить HTML
3. Перед закрывающим тэгом </head> добавляем вот такой код:
<link href='http://bitbucket.org/alexg/syntaxhighlighter/raw/8815b7f713eb/Styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://bitbucket.org/alexg/syntaxhighlighter/raw/8815b7f713eb/Styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>



C 5 по 9 строчку идет подключение подсветки необходимых языков. У меня это PHP, XML, C#, Delphi, JS. Для подключения дополнительных языков необходимо скопировать любую из этих строчек и изменить имя подключаемого файла на необходимое. Полный список поддерживаемых языков, их brush алиасов и файлов, необходимых для их подсветки, можно узнать на сайте alexgorbatchev.com.


4. Чтобы подсветка отображалась необходимо заключать куски кода в тэги <pre class="brush: html"></pre>
, заменяя значение html свойства brush на алиас языка, синтаксис которого необходимо подсвечивать. Теперь все готово и должно работать. Стоит только обратить внимание,для того, чтобы всё корректно работало, необходимо внимательно следить, чтобы в исходниках, которые ты вставляешь в блог, символ "<" был заменён на "&lt;".

Комментариев нет:

Отправить комментарий