Подсветка синтаксиса на Blogger.com

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

Для подсветки синтаксиса на блогспоте можно использовать JavaScript библиотеку "SyntaxHighlighter by Alex Gorbatchev". Библиотека не требует размещения непосредственно на сайте и не используется на стороне сервера. Что как раз и нужно на блогспоте. После знакомства с библиотекой SyntaxHighlighter можно интегрировать ее с Вашим блогом.
Внимание! Перед внесением изменений в шаблон обязательно сохраните резервную копию!
В шаблоне в секцию <head>...</head> добавляем импорт библиотеки:

<head>
 . . .
 
<script type="text/javascript" src="SH_HOME/scripts/shCore.js"></script>
<script type="text/javascript" src="SH_HOME/scripts/shBrushJScript.js"></script>

<link type="text/css" rel="Stylesheet" href="SH_HOME/styles/shCore.css"/>
<link type="text/css" rel="Stylesheet" href="SH_HOME/styles/shThemeDefault.css"/>

<script type="text/javascript">
     SyntaxHighlighter.config.clipboardSwf = 'SH_HOME/scripts/clipboard.swf';
     SyntaxHighlighter.config.bloggerMode = true;
     SyntaxHighlighter.all()
</script>
 
 . . .
</head>

SH_HOME - это путь к библиотеке. Если Вы будете ее использовать с сайта проекта, то путь будет таким: "http://alexgorbatchev.com/pub/sh/версия_библиотеки/" (на момент публикации данной статьи, последняя версия: 2.1.364). Обязательно включаем опцию "bloggerMode = true" (12-я строка) - это как раз поддержка для движка Blogger.com. Сохраняем шаблон, с ним закончили.
Как подсвечивать?
Для этого помещаем листинг внутри тега <pre>, в редакторе сообщений в режиме <Изменить HTML>:
<pre class="brush: java">
    /**
     * Hello World! on Java
     */
    public void SayHello()
    {
        if (counter &lt;= 10)
            System.out.println("Hello World!"); //some comments
    }
</pre>

Должно получиться вот так:

/**
     * Hello World! on Java
     */
    public void SayHello()
    {
        if (counter <= 10)
            System.out.println("Hello World!"); //some comments
    }
Не забываем, заменять символ "<" на его код "&lt", и так придётся со всеми спецсимволами. Неудобно, но есть куча утилит которые легко с этим справляются. Либо вначале редактируем листинг в режиме "текст" а уже потом в режиме "html", тогда редактор сам заменит, но придётся вычищать оставленные им теги.
Теперь у Вас в блоге будут красиво подсвеченные листинги. Читатели обязательно оценят это.

15 комментариев:

  1. а как сделать так чтобы блок со справкой, копированием, и просмотром кода, который в верхнем правом углу появлялся при наведении???

    ОтветитьУдалить
  2. Так он так и появляется. Как, например, в этом посте. Гляньте 3-ю версию, там много приятных изменений с этим блоком.

    ОтветитьУдалить
  3. Круто. Я бы еще добавил, что скрипт активно использует тег — code. А в большинстве тем на блогспоте по умолчанию есть правило для него {display:block}. Надо поправлять, а то строчки сбиваются.

    ОтветитьУдалить
  4. В 3-й версии, нужно что-то менять для нормального отображения toolbar ? Сделал по статье, но вместо него просто "?" с информацией о скрипте.

    ОтветитьУдалить
  5. > to hedq

    В 3-й версии он такой и есть. "Копировать" - теперь, как обычно, выделить и скопировать. Работа с буфером обмена в 3-й версии через джава-скрипт, а не через "невидимый" флеш. "Печать" и "Просмотр исходника" убраны из тулбара. Кстати, на сайте Алекса, точно так же - один "?" и все.

    ОтветитьУдалить
  6. Спасибо за хорошую статью и пояснения!

    ОтветитьУдалить
  7. Переноса строки не хватает :( Можно как-то добавить?

    ОтветитьУдалить
  8. Вот что получилось
    http://administraher.blogspot.com/2012/04/blog-post.html

    ОтветитьУдалить
  9. А с помощью чего Вы подсвечиваете тег <code>?

    ОтветитьУдалить
    Ответы
    1. В настройках (http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/) есть параметр "tagName", который отвечает за выбор родительского тега "подсвечиваемого" кода. По умолчанию - он pre

      Удалить
  10. Почему у меня вот так?
    http://mypronote.blogspot.com/2012/11/include-include-include-char-vdeck564.html
    вот мой шаблон:http://pastebin.com/W1hgStGH

    ОтветитьУдалить
  11. Подскажите пож, как сделать чтоб у линий фон менялся, тоисть чередовался с белого на серый?
    У меня почему-то все белое.
    Пробую выставить с помощью
    http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/
    параметр "highlight".
    Но при вводе массива, получаю только те подсвеченные строчки, что написал в массиве.

    Спасиб.

    ОтветитьУдалить
  12. This doesn't work anymore with blogger and especially the dynamic views. Do you have any idea how to get it work?

    ОтветитьУдалить
  13. Good alternative https://highlightjs.org/

    (without line numbers
    http://highlightjs.readthedocs.io/en/latest/line-numbers.html)

    ОтветитьУдалить