Озадачился сделать нормальную подсветку синтаксиса скриптов, конфигов и т.д.
В ходе поисков наткнулся на хорошую статью Подсветка синтаксиса на Blogger.com на блоге http://rootger.blogspot.com. Спасибо автору!
Эта заметка является дубляжем с небольшими изменениями (заметка для себя).
Многие блоги посвящены программированию и поэтому приходится выкладывать много исходников.
Для удобства восприятия, листинги форматируют - подсвечивают синтаксис.
К сожалению на блогспоте возможности очень ограниченны, что сильно сокращает выбор таких инструментов.
Для подсветки синтаксиса на блогспоте можно использовать JavaScript библиотеку "SyntaxHighlighter by Alex Gorbatchev". Библиотека не требует размещения непосредственно на сайте и не используется на стороне сервера. Что как раз и нужно на блогспоте. После знакомства с библиотекой SyntaxHighlighter можно интегрировать ее с Вашим блогом.
Внимание! Перед внесением изменений в шаблон обязательно сохраните резервную копию!
В шаблоне в секцию <head>...</head> добавляем импорт библиотеки:
SH_HOME - это путь к библиотеке. Если Вы будете ее использовать с сайта проекта, то путь будет таким: "http://alexgorbatchev.com/pub/sh/версия_библиотеки/" (на момент публикации данной статьи, последняя версия: 3.0.83). Более подробно можно посмотреть здесь. Можно вообще указать "http://alexgorbatchev.com/pub/sh/current/" - что соответствует последней стабильной версии.
Обязательно включаем опцию "bloggerMode = true" - это как раз поддержка для движка Blogger.com. Также можно посмотреть, какие еще дополнительные опции Вам нужны
Т.е. если вы хотите, чтоб отрабатывала последняя стабильная версия, то вставляемый код будет иметь следующий вид:
Сохраняем шаблон, с ним закончили.
Как подсвечивать?
Для этого помещаем листинг внутри тега <pre>, в редакторе сообщений в режиме <Изменить HTML >
Неудобно, но есть куча утилит которые легко с этим справляются. Например есть онлайн страница, которая позволяет получить "правильный код" в пару кликов. На самом сайте есть инструкция
Либо вначале редактируем листинг в режиме "текст" а уже потом в режиме "html", тогда редактор сам заменит, но придётся вычищать оставленные им теги.
Теперь у Вас в блоге будут красиво подсвеченные листинги. Читатели обязательно оценят это.
Примечание: В 3-й версии скрипта toolbar не показывается полностью, отображается только "?" - информация о скрипте.
Копирование происходит так-же как и с обычным текстом, выделить и скопировать инстурментами самого браузера. Работа с буфером обмена в 3-й версии через джава-скрипт, а не через "невидимый" флеш. "Печать" и "Просмотр исходника" убраны из тулбара. (спасибо за пояснения r00tGE(R) )
Ссылки:
Подсветка синтаксиса на Blogger.com
Позвольте представить: Code Publication Utility for SyntaxHighlighter by Alex Gorbatchev
В ходе поисков наткнулся на хорошую статью Подсветка синтаксиса на Blogger.com на блоге http://rootger.blogspot.com. Спасибо автору!
Эта заметка является дубляжем с небольшими изменениями (заметка для себя).
Многие блоги посвящены программированию и поэтому приходится выкладывать много исходников.
Для удобства восприятия, листинги форматируют - подсвечивают синтаксис.
К сожалению на блогспоте возможности очень ограниченны, что сильно сокращает выбор таких инструментов.
Для подсветки синтаксиса на блогспоте можно использовать JavaScript библиотеку "SyntaxHighlighter by Alex Gorbatchev". Библиотека не требует размещения непосредственно на сайте и не используется на стороне сервера. Что как раз и нужно на блогспоте. После знакомства с библиотекой SyntaxHighlighter можно интегрировать ее с Вашим блогом.
Внимание! Перед внесением изменений в шаблон обязательно сохраните резервную копию!
В шаблоне в секцию <head>...</head> добавляем импорт библиотеки:
<head>
. . .
<script type="text/javascript" src="SH_HOME/scripts/shCore.js"></script>
<script type="text/javascript" src="SH_HOME/scripts/shBrushJScript.js"></script>
<link type="text/css" rel="Stylesheet" href="SH_HOME/styles/shCore.css"/>
<link type="text/css" rel="Stylesheet" href="SH_HOME/styles/shThemeDefault.css"/>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'SH_HOME/scripts/clipboard.swf';
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all()
</script>
. . .
</head>
SH_HOME - это путь к библиотеке. Если Вы будете ее использовать с сайта проекта, то путь будет таким: "http://alexgorbatchev.com/pub/sh/версия_библиотеки/" (на момент публикации данной статьи, последняя версия: 3.0.83). Более подробно можно посмотреть здесь. Можно вообще указать "http://alexgorbatchev.com/pub/sh/current/" - что соответствует последней стабильной версии.
Обязательно включаем опцию "bloggerMode = true" - это как раз поддержка для движка Blogger.com. Также можно посмотреть, какие еще дополнительные опции Вам нужны
Т.е. если вы хотите, чтоб отрабатывала последняя стабильная версия, то вставляемый код будет иметь следующий вид:
<head>
. . .
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js"></script>
<link type="text/css" rel="Stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css"/>
<link type="text/css" rel="Stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css"/>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all()
</script>
. . .
</head>
Сохраняем шаблон, с ним закончили.
Как подсвечивать?
Для этого помещаем листинг внутри тега <pre>, в редакторе сообщений в режиме <Изменить HTML >
<pre class="brush: js"> /**
* SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
// it works!
}</pre>
Должно получиться так:
/**
* SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
// it works!
}
Не забываем, заменять символы "<" и
">"
на их коды "<" и
">"
, и так придётся со всеми спецсимволами.Неудобно, но есть куча утилит которые легко с этим справляются. Например есть онлайн страница, которая позволяет получить "правильный код" в пару кликов. На самом сайте есть инструкция
Либо вначале редактируем листинг в режиме "текст" а уже потом в режиме "html", тогда редактор сам заменит, но придётся вычищать оставленные им теги.
Теперь у Вас в блоге будут красиво подсвеченные листинги. Читатели обязательно оценят это.
Примечание: В 3-й версии скрипта toolbar не показывается полностью, отображается только "?" - информация о скрипте.
Копирование происходит так-же как и с обычным текстом, выделить и скопировать инстурментами самого браузера. Работа с буфером обмена в 3-й версии через джава-скрипт, а не через "невидимый" флеш. "Печать" и "Просмотр исходника" убраны из тулбара. (спасибо за пояснения r00tGE(R) )
Ссылки:
Подсветка синтаксиса на Blogger.com
Позвольте представить: Code Publication Utility for SyntaxHighlighter by Alex Gorbatchev
Благодарю за обилие ссылок на мои страницы. Насчет "?", я уже ответил у себя. Повторюсь: "В 3-й версии так и должно быть", даже на сайте разработчика Алекса все именно так. Копирование происходит так-же как и с обычным текстом, выделить и скопировать инстурментами самого браузера.
ОтветитьУдалитьЯ всегда стараюсь указывать источники, которые использовал :).
ОтветитьУдалитьСпасибо за пояснения!