понедельник, 2 августа 2010 г.

Добавляем подсветку синтаксиса в Blogger

Первая же трабла с которой столкнулся - отсутствие подсветки синтаксиса из коробки. Весьма странно для одного из самых популярных блог-хостинга >.> Два часа гугления дали 2 приемлимых подхода.

Использования стороннего хостинга для т.н. снипетов (snippets).
Самым вкусным мне показался gist.github.com.

Но он слегка разочаровал однострочной саморекламой под каждым (!) сниппетом. Т.е. если близко друг от друга идут однострочные снипеты - то они будут напополам разбавлены рекламой >.< Из плюсов можно назвать: хранение в одном сервисе с кодом; версионность; возможность добавив в несколько блогов/сайтов/форумов и изменив потом в одном месте - сразу видеть изменения везде; очень мощный движок подсветки - Pygments, поддерживающий все что движется; рендеринг на стороне сервера.
  1. регаемся на github.com, если еще не успели этого сделать.
  2. заходим на gist.github.com
  3. выбираем справа наверху язык, который подсвечивать
  4. вбиваем код и жмем Create Public Gist
  5. посередине страницы жмем не сильно заметную ссылку embed
  6. копируем открывшуюся ссылку в HTML разметку нашего поста
Использование JavaScript библиотек, для рендеринга на стороне клиента.
Лидерует с отрывом по используемости либа с говорящим названием SyntaxHighlighter.

Работает достаточно резво, но стандартный пак т.н. кистей (brushes, это собсно js код, обеспечивающий поддержку нужного формата) достаточно скуден, что к счастью легко лечится - сторонних кистей предостаточно. Плюсы: нет рекламы; код хранится в теле поста и не надо для исправления пары символов лезть на еще один сервис. Основные минусы: необходимость редактировать шаблон; необходимость или эскейпить все HTML символы и тогда будет использован тег pre или прятать в религиозно-неправильный тег script + блок CDATA и тогда не надо эскейпить.
  1. открываем редактор шаблона (Дизайн -> Изменить HTML)
  2. перед закрытием тега head вписываем строки:

  3. пролистываем в конец, и перед закрытием тега 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('@', 'http://alexgorbatchev.com/pub/sh/current/scripts/'));
           
      return result
    };
    SyntaxHighlighter.config.bloggerMode = true;
    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.all();
    //]]>
    </script>
  4. чтобы добавить код в пост открываем HTMLEscape, ставим две правые галочки, копипастим код, жмем Escape. полученное вставлем в:

    или, если эскейпить не хочется - вставляем в:
    <script type="syntaxhighlighter" class="brush: <!--название языка-->" ><![CDATA[
    собственно код
    ]]></script>
    
Злоключение.
Криво и то и то >.< Хочется хранить код в постах и при этом не срать кирпичами, когда нужно запостить код с хитрыми тэгами (как например в этом посте). Наверно буду использовать и gist и оба варианта тегов syntaxhighlighter'а... Если к адской колеснице не привыкну - буду искать другой блогохостинг.. хабра-хабр?

Комментариев нет: