понедельник, 27 сентября 2010 г.

Устанавливаем SyntaxHighlighter 3 для Blogger/Blogspot

При написании статьи у меня возникла потребность в подсвечивании синтаксиса кода. Самый удобный и распространенный способ, это использовать библиотеку Alex Gorbatchev - SyntaxHighlighter. Основываясь на предыдущих успешных установках этой библиотеки для движка блогов Blogger, я принялся за дело и по пути, конечно, решил использовать одну из последних усовершенствований - автозагрузку различных кистей. Следую примеру интеграции, а они все следует сказать, достаточно старые и основываясь на обновленной wiki, я сразу не смог получить результат.
Пример из wiki насторек SyntaxHighlighter для Blogger не заработал.
Привожу краткий результат какие необходимы шаги для успешной интеграции SyntaxHighlighter 3 и Blogger:
  1. Скачиваем  последнюю версию библиотеки, это конечно лишает нас возможности автоматического обновления, что было бы доступно при использовании размещенной версии, но я несколько раз получал отказ в доступе к ресурсам размещенных на сервере Amazon S3, поэтому решил использовать собственный хостинг
  2. Заливаем на наш хостинг содержимое папок Scripts и Styles, особенно удобно если у вас подключен дополнительный псевдоним для недоступного контента на Blogger, это можно сделать в настройках Settings->Publishing->Missing files host, тогда заливая на этот хост, мы можем ссылаться на файлы, как будто они размещены на основном домене блога.
  3. Редактируем шаблон сайта и перед закрывающимся тэгом </head> вставляем ссылки


    <link href='/syntaxhighlighter/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
    <link href='/syntaxhighlighter/styles/shCore.css' rel='stylesheet' type='text/css'/>
    <script src='/syntaxhighlighter/scripts/shCore.js' type='text/javascript'/>
    <script src='/syntaxhighlighter/scripts/shAutoloader.js' type='text/javascript'/>
    У меня выделена папка syntaxhighlighter для всех файлов библиотеки.
  4. В конце шаблона сайта перед закрывающим тэгом </body> вставляем код немного отредактированный мной:


    <script type='text/javascript'>
    //<![CDATA[
    function path()
    {
      var args = arguments, result = [];
           
      for(var i = 0; i < args.length; i++)
          result.push(args[i].replace('@', '/syntaxhighlighter/scripts/'));
           
      return result;
    };
    
    SyntaxHighlighter.autoloader.apply(null, path(
      'applescript            @shBrushAppleScript.js',
      'actionscript3 as3      @shBrushAS3.js',
      'bash shell             @shBrushBash.js',
      'coldfusion cf          @shBrushColdFusion.js',
      'cpp c                  @shBrushCpp.js',
      'c# c-sharp csharp      @shBrushCSharp.js',
      'css                    @shBrushCss.js',
      'delphi pascal          @shBrushDelphi.js',
      'diff patch pas         @shBrushDiff.js',
      'erl erlang             @shBrushErlang.js',
      'groovy                 @shBrushGroovy.js',
      'java                   @shBrushJava.js',
      'jfx javafx             @shBrushJavaFX.js',
      'js jscript javascript  @shBrushJScript.js',
      'perl pl                @shBrushPerl.js',
      'php                    @shBrushPhp.js',
      'text plain             @shBrushPlain.js',
      'py python              @shBrushPython.js',
      'ruby rails ror rb      @shBrushRuby.js',
      'sass scss              @shBrushSass.js',
      'scala                  @shBrushScala.js',
      'sql                    @shBrushSql.js',
      'vb vbnet               @shBrushVb.js',
      'xml xhtml xslt html    @shBrushXml.js'
    ));
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
    //]]>
    </script>
    
Теперь у нас настроена автоматическая подсветка синтаксиса и доступна дополнительная конфигурация

3 коммент.:

Сергей Королёв комментирует...

Спасибо!

Alexandr Astashkin комментирует...

Спасибо за пояснения. Все сделал,как написано. Вот только нумерация строк неверная. В чем может быть причина? И есть ли возможность переноса строк, чтобы скролл-бар не появлялся?

Alexandr Astashkin комментирует...

Нумерация строк однозначная и беспорядочная. Сравнил исходные коды страниц все точно также. Вот пример

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