Новые плюшки SyntaxHighlighter 3

Лето выдалось для меня довольно энергичным и знаменательным. Хотя, с точки зрения моего блога, это было не заметно, а порой казалось, наверное, что он и вовсе умер. Все акценты сместились в сторону реальной жизни, существенная часть времени уделялась как подготовке к своей свадьбе, так и самой свадьбе и все это феерическое действие было завершено отличным отдыхом в теплых краях. Для себя решил, что летнюю программу я выполнил на отлично, так что можно проявить немного творчества :).

2 июля 2010 года была анонсирована новая версия SyntaxHighlighter 3.0.83. В этом небольшом посте хочу немного рассказать про новые возможности и недостатки данной версии.

Динамическая загрузка кистей

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

Для подключение динамической загрузки используйте следующий код:

<script src="shCore.js" type="text/javascript"></script>
<script src="shAutoloader.js" type="text/javascript"></script>
<script type="text/javascript">
SyntaxHighlighter.autoloader(
'js jscript javascript  /js/shBrushJScript.js',
'applescript            /js/shBrushAppleScript.js');
SyntaxHighlighter.all();
</script>

Отсутствие flash-а

Наличие flash-а было обусловлено необходимостью иметь возможность копировать исходный код. При использовании 2-й версии выделение "подсвеченного" текста (больше 1-й строки) и копирования его приводило к добавлению в каждую строчку номер строки.

Пример выделения:


Результат копирования:
C:\Sphinx>bin\indexer --all
02 Sphinx 0.9.9-rc1 (r1566)
03 Copyright (c) 2001-2008, Andrew Aksyonoff

В версии 3 проблема решена разделением блоков нумерации и кода.



Выделяем необходимую область и копируем (Ctrl-C). Проще простого, а главное интуитивно понятно!

"Скрываемые" блоки

Эта возможность позволяет помещать скрытые блоки кода на страницу и отображать их по клику пользователя на тексте. Добавьте атрибут title к тегам <pre /> или <script /> следующим образом.

<script type="syntaxhighlighter" class="brush: bash" title="Хочешь посмотреть код, жми тут!">
C:\Sphinx>bin\indexer --all
Sphinx 0.9.9-rc1 (r1566)
Copyright (c) 2001-2008, Andrew Aksyonoff
</script>

В результате будет только фраза "Хочешь посмотреть код, жми тут!", при клике на которой раскроется контейнер с кодом.

Непредвиденное поведение

В данной версии не обошлось и без небольших багов. Возможно будет поправлено в следующих релизах.

Первое. При наведении мышкой на область "подсвеченного" кода иногда возникает почти незаметный эффект прокрутки внутри области, тем самым блокируя прокрутку во всем окне, что доставляет определенные неудобства :(. Замечено в FireFox 3.6.10.

Второе. Кликает двойным щелчком на область "подсвеченного" кода (происходит выделение всего кода), потом одинарным кликом на любое место той же области и замечаем, что текст всей области стал одноцветный (черный). Если убрать курсор(клик за рамками области) с области, то цвета будут отображены снова. Наблюдается в FireFox 3.6.10, Safari 5.0, Chrome 6.0.472.62.

Добавление SyntaxHighlighter 3 в блог Blogger

Думал упростить данную установку и реализовать виджет в котором бы содержалась вся логика по установке и инициализации SyntaxHighlighter 3. Но после отладки скриптов столкнулся с особенностью реализации виджетов в Blogger. Как оказалось, каждый такой виджет запускается в фрейме, в котором блокируется доступ("удаляются" ссылки) к основной странице :(. Т.е. эффект от этого виджета будет стремится к 0 :). Поэтому заходим в на страницу редактирования шаблона ("Дизайн"->"Изменить Html"), находим элемент "</body>" и вставляем следующий код до этого элемента.

<link type="text/css" rel="Stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script>
<script type="text/javascript">
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.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>

Надеюсь, что-то новое и/или полезное вы для себя нашли! :)