четверг, 1 марта 2012 г.

Подсветка синтаксиса в blogger с помощью SyntaxHighlighter 3

Хочу поделиться тем как реализовал поддержку подсветки синтаксиса в этом блоге.

У всех рекомендаций, найденных мной в сети, были недостатки - они требовали либо достаточно крупного редактирования шаблона, либо отдельного хостинга. К сожалению сервис blogger не особо щедр на место, по крайней мере мне найти такую возможность не удалось. Однако решение для тех кто ютится на чужом сервисе описано на самом сайте производителя в разделе описание хостинг версии. Для меня это решение оказалось удачным.

Перейдем к делу - открываем шаблон через редактор шаблонов и добавляем в конец секции head следующие строки:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.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/shAutoloader.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='Stylesheet' type='text/css'/>
В данном случае из текущей версии Hightligtera подключаются файлы shAutoloader.js, shCore.css и shCore.js, а также подключается наиболее подходящий под оформление блога стиль оформления shThemeEmacs.css. Для каждого из требуемых синтаксисов необходимо добавить файл с поддерживающим его скриптом. В моем случае это shBrushCpp.js. Полный список входящих в комплект поставки кистей можно найти на страницы syntaxes сайта разработчика.

После подключения всех необходимых кистей и стилей нам необходимо произвести настройку на blogger. Для этого необходимо следом за подключением добавить небольшой скрипт следующего содержания:
<script language='javascript'>
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>

Первая строка этого скрипта настраивает SyntaxHighlighter на работу с сервисом blogger. Вторая отвечает за применение настроек ко всем элементам.

Подробнее о настройках можно опять-же почитать на сайте разработчика.

Теперь мы можем раскрашивать свой код. Для этого мы можем использовать тег pre приблизительно следующим образом:
<pre class='brush: cpp;'>
static int __init
proctest_init(void)
{
    proc_entry = create_proc_entry(proc_file_name, 0644, NULL);
    if (proc_entry != NULL)
    {
        return 0;
    }
    return -ENOMEM;
}
</pre>

В результате получаем следующий внешний вид:

static int __init
proctest_init(void)
{
    proc_entry = create_proc_entry(proc_file_name, 0644, NULL);
    if (proc_entry != NULL)
    {
        return 0;
    }
    return -ENOMEM;
}

Отдельно следует упомянуть о возможности подсвечивать определённые строки. Это делается с помощью изменения имени класса тега:
<pre class='brush: cpp; highlight: [1, 4]'>
static int __init
proctest_init(void)
{
    proc_entry = create_proc_entry(proc_file_name, 0644, NULL);
    if (proc_entry != NULL)
    {
        return 0;
    }
    return -ENOMEM;
}
</pre>
В результате получаем оформление кода в следующем виде:
static int __init
proctest_init(void)
{
    proc_entry = create_proc_entry(proc_file_name, 0644, NULL);
    if (proc_entry != NULL)
    {
        return 0;
    }
    return -ENOMEM;
}

И в качестве заключения хочу напомнить, что символы < и > необходимо заменять на &lt; и &gt; соответственно.