Подсветка синтаксиса на 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. Анонимный11 сентября 2010 г. в 13:34

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

    ОтветитьУдалить
  2. r00tGE(R)13 сентября 2010 г. в 09:20

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

    ОтветитьУдалить
  3. jalexander30 ноября 2010 г. в 13:35

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

    ОтветитьУдалить
  4. hedg27 июля 2011 г. в 13:00

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

    ОтветитьУдалить
  5. r00tGE(R)28 июля 2011 г. в 09:14

    > to hedq

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

    ОтветитьУдалить
  6. hedg28 июля 2011 г. в 10:33

    Спасибо за хорошую статью и пояснения!

    ОтветитьУдалить
  7. Unknown13 апреля 2012 г. в 10:58

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

    ОтветитьУдалить
  8. Unknown13 апреля 2012 г. в 12:46

    Вот что получилось
    http://administraher.blogspot.com/2012/04/blog-post.html

    ОтветитьУдалить
  9. Unknown30 апреля 2012 г. в 10:27

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

    ОтветитьУдалить
    Ответы
    1. r00tGE(R)30 апреля 2012 г. в 21:18

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

      Удалить
  10. Unknown9 ноября 2012 г. в 21:44

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

    ОтветитьУдалить
  11. Анонимный19 ноября 2012 г. в 03:35

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

    Спасиб.

    ОтветитьУдалить
  12. Jay Khimani18 мая 2016 г. в 13:22

    This doesn't work anymore with blogger and especially the dynamic views. Do you have any idea how to get it work?

    ОтветитьУдалить
  13. Анонимный25 января 2017 г. в 02:19

    Good alternative https://highlightjs.org/

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

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

Подписаться на: Комментарии к сообщению (Atom)