При написании статьи у меня возникла потребность в подсвечивании
синтаксиса кода. Самый удобный и распространенный способ, это использовать
библиотеку Alex Gorbatchev - SyntaxHighlighter. Основываясь на предыдущих успешных установках этой библиотеки для движка блогов Blogger, я принялся за дело и по пути, конечно, решил использовать одну из последних усовершенствований -
автозагрузку различных кистей. Следую примеру интеграции, а они все следует сказать, достаточно старые и основываясь на обновленной wiki, я сразу не смог получить результат.
Пример из wiki насторек SyntaxHighlighter для Blogger не заработал.
Привожу краткий результат какие необходимы шаги для успешной интеграции SyntaxHighlighter 3 и Blogger:
- Скачиваем последнюю версию библиотеки, это конечно лишает нас возможности автоматического обновления, что было бы доступно при использовании размещенной версии, но я несколько раз получал отказ в доступе к ресурсам размещенных на сервере Amazon S3, поэтому решил использовать собственный хостинг
- Заливаем на наш хостинг содержимое папок Scripts и Styles, особенно удобно если у вас подключен дополнительный псевдоним для недоступного контента на Blogger, это можно сделать в настройках Settings->Publishing->Missing files host, тогда заливая на этот хост, мы можем ссылаться на файлы, как будто они размещены на основном домене блога.
- Редактируем шаблон сайта и перед закрывающимся тэгом </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 для всех файлов библиотеки.
- В конце шаблона сайта перед закрывающим тэгом </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 коммент.:
Спасибо за пояснения. Все сделал,как написано. Вот только нумерация строк неверная. В чем может быть причина? И есть ли возможность переноса строк, чтобы скролл-бар не появлялся?
Нумерация строк однозначная и беспорядочная. Сравнил исходные коды страниц все точно также. Вот пример
Best casino near me (Washington, DC) - Mapyro
› › Casino Near me (Washington, 청주 출장샵 DC) 삼척 출장안마 › Casino Near me (Washington, DC) Get Directions & Directions · Closest Casino to 안성 출장안마 Casino: · 양주 출장샵 The Riverwalk Hotel & Casino · Tropicana Casino · Bellagio Casino · 경산 출장마사지 Fairmont
Отправить комментарий