blogger: подсветка синтаксиса

Подсветка синтаксиса в блоге важная и нужная вещь. Ранее в сообщении "Вставка кода в blogger" я описывал простой способ, но не достаточно эффективный, решить данную проблему. Сегодня я обнаружил проект "SyntaxHighlighter" Александра Горбачёва, который позволяет вставлять код в любые HTML-страницы.

Для начала следует изменить шаблон:

Игнорируем предупреждение:

Вставляем код:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreEclipse.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

Сохраняем шаблон:

Используем тег pre для обрамления и подсветки кода:

<pre class="brush: html">
...
</pre>

После brush вместо html нужно указать нужный язык. Полный перечень можно найти здесь.

Имеется много опций форматирования текста. Например, можно убрать номера строк или свернуть код. Все эти возможности показаны на http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/.

Также нужно помнить, что в тексте внутри тегов pre следует делать замену символов:

 " на "

& на &

< на &lt;

> на &gt;

Такую замену можно выполнить по-разному. Онлайн замену лучше делать на специально разработанном для этого сайте http://code-highlight.appspot.com/. Рекомендую! (Оффлайн замену я произвожу с использованием модуля perl HTML::Entities.)

Более полный список шаблонов можно найти на страничке http://www.undermyhat.org/blog/2009/09/list-of-brushes-syntaxhighligher/. Крайне полезная работа!

Полезно будет почитать http://rootger.blogspot.com/search/label/Подсветка%20синтаксиса или, по крайней мере, следить за новостями в этом блоге. Также как обзорный материал, но более подробный http://www.cyberack.com/2007/07/adding-syntax-highlighter-to-blogger.html.