Сергей Мельниченко
Новые плюшки 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>
Надеюсь, что-то новое и/или полезное вы для себя нашли! :)
- 07 Окт 12:58
) на панели при редактировании сообщений, выбираете картинку со своего рабочего стола и жмем "Загрузить изображение". Просто и элементарно, правда ссылка на такую картинку получается жутко большой.
