Warlon blog: Учим blogspot подсвечивать исходный код

Согласитесь, гораздо приятнее читать листинг программы, когда её синтаксис подсвечен так же, как и редакторе.
Плохо только то, что это требует увеличит время на загрузку страницы.

Обновление от 24.05.2011: Новая версия подсветки кода
Однако беглый анализ показал что для визуального восприятия ничего страшного не происходит, а вот страница выглядит приятнее.

Иными словами, если Вам надо выделить код один - два раза, то лучше воспользоваться онлайн сервисом подсветки кода. Например вот этим.

Но если у Вас будет код публиковаться постоянно, то можно и научить свой блог это делать. К сожалению для blogspot пока нет такого плагина. Поэтому придётся пользоваться сторонними скриптами.

Я остановил свой выбор на SyntaxHighlighter от Алексея Горбачёва.

Что бы начать использовать его решение, сначала надо выполнить настройку шаблона:

В панели управления идём в меню "Дизайн" и там выбираем пункт "Изменить HTML".
Делаем резервную копию текущего шаблона. Для этого выбираем пункт "Загрузить весь шаблон". Называем файл удобным именем. Лично я в качестве имени файла выбираю такой шаблон [имя блога]-template-[ddMMyyyyHHmm].xml. Например sedegoff-template-110420110859.xml

Теперь ищем в тексте шаблона конструкцию "</head>" и перед ней добавляем код.

<!--SYNTAX HIGHLIGHTER BEGINS-->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/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/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER ENDS-->

Жмём кнопку "Сохранить шаблон"

Теперь можно вставлять код в свой блог. Но прежде расскажу что можно "оптимизировать". Если Вы используете только язык C#, то грузить свой блог скриптами для C++ смысла нет. Поэтому небольшое пояснение к добавленному коду:

Это базовый CSS файл - он должен быть.

<!--SYNTAX HIGHLIGHTER BEGINS-->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>

Это файл стилей, который стилизует подсветку под определённые среды разработки.

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

Если посмотрите на скриншот выше, то увидите что у меня в настройках у меня вместо него стоит

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css" rel="Stylesheet" type="text/css"></link>

Полный список возможных сред представлен на сайте разработчика. Выбираете понравившуюся тему и заменяете имя css файла.
Это базовый скрипт - его удалять нельзя.

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>

Это скрипт для раскрашивания C++ кода

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>

Это скрипт для раскрашивания C# кода

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>

Это скрипт для раскрашивания CSS кода

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>

Это скрипт для раскрашивания JAVA кода

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>

Это скрипт для раскрашивания JavaScript кода

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>

Это скрипт для раскрашивания PHP кода

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>

Это скрипт для раскрашивания SQL кода

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>

Это скрипт для раскрашивания XML, HTML кода

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>

Это скрипт для раскрашивания Perl кода

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' 
type='text/javascript'></script>

Инициализация скрипта

<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER ENDS-->

Соответственно если Вам какой то синтаксис не нужен - просто удалите его. Полный список поддерживаемых языков смотрите на сайте.

Теперь собственно как использовать. Минусом данного подхода является то, что выполнять надо это не в визуальном редакторе, а в режиме "Изменить HTML". Но с другой стороны, если Вы можете разговаривать на языке программирования, то проблем не будет с этим.

Существует два способа вставки подсветки кода. Честно не знаю чем они отличаются. Если Вам известно - поделитесь информацией пожалуйста. А пока такой информации нет - пользуйтесь тем, что Вам удобнее. В одном я уверен точно - не надо пользоваться одновременно двумя методами.

Обрамление кода в тэг <pre>
Обрамление кода в тэг <script>

Тэг <pre>.
Семантика

<pre class="brush:[Имя языка для раскраски]">
Тут листинг программы/модуля/функции
</pre>

Вместо "[Имя языка для раскраски]" нужно указать необходимый Вам. Полный список можно посмотреть тут. Но использовать Вы сможете только те, что подключили.
Порядок использования:

Используя инструмент типа Quick Escape, экранируйте служебные символы. Нужно это для того, что бы не получить сообщение "Ваш код HTML не может быть принят: Недопустимый тег: LINK"
Переключаетесь в режим "Изменить HTML"
Вводите конструкцию тэга <pre>
Вставляете код внутрь тэга.
Если необходимо переключаетесь в визуальный редактор. Стоит отметить что в визуальном редакторе вы будете просто видеть текст. А при просмотре уже всё будет нормально.

ActionScript3
<pre class="brush:as3">


</pre>


ActionScript3
<pre class="brush:actionscript3">


</pre>


Bash/shell
<pre class="brush:bash">


</pre>


Bash/shell
<pre class="brush:shell">


</pre>


ColdFusion
<pre class="brush:cf">


</pre>


ColdFusion
<pre class="brush:coldfusion">


</pre>


C#
<pre class="brush:c-sharp">


</pre>


C#
<pre class="brush:csharp">


</pre>


C++
<pre class="brush:cpp">


</pre>


C++
<pre class="brush:c">


</pre>


CSS
<pre class="brush:css">


</pre>


Delphi
<pre class="brush:delphi">


</pre>


Delphi
<pre class="brush:pas">


</pre>


Delphi
<pre class="brush:pascal">


</pre>


Diff
<pre class="brush:diff">


</pre>

Diff
<pre class="brush:patch">


</pre>


Erlang
<pre class="brush:erl">


</pre>


Erlang
<pre class="brush:erlang">


</pre>


Groovy
<pre class="brush:groovy">


</pre>


JavaScript
<pre class="brush:js">


</pre>


JavaScript
<pre class="brush:jscript">


</pre>


JavaScript
<pre class="brush:javascript">


</pre>


Java
<pre class="brush:java">


</pre>


JavaFX
<pre class="brush:jfx">


</pre>


JavaFX
<pre class="brush:javafx">


</pre>


Perl
<pre class="brush:perl">


</pre>


Perl
<pre class="brush:pl">


</pre>


PHP
<pre class="brush:php">


</pre>


Plain Text
<pre class="brush:plain">


</pre>


Plain Text
<pre class="brush:text">


</pre>


PowerShell
<pre class="brush:ps">


</pre>


PowerShell
<pre class="brush:powershell">


</pre>


Python
<pre class="brush:py">


</pre>


Python
<pre class="brush:python">


</pre>


Ruby
<pre class="brush:rails">


</pre>


Ruby
<pre class="brush:ror">


</pre>


Ruby
<pre class="brush:ruby">


</pre>


Scala
<pre class="brush:scala">


</pre>


SQL
<pre class="brush:sql">


</pre>


Visual Basic
<pre class="brush:vb">


</pre>


Visual Basic
<pre class="brush:vbnet">


</pre>


XML
<pre class="brush:xml">


</pre>


XHTML
<pre class="brush:xhtml">


</pre>


XSLT
<pre class="brush:xslt">


</pre>


HTML
<pre class="brush:html">


</pre>

Тэг <script>
Семантика:

<script type="syntaxhighlighter" class="brush:[Имя языка для раскраски]">
<![CDATA[ 
Тут листинг программы/модуля/функции 
]]></script>

Переключаетесь в режим "Изменить HTML"
Ввести конструкцию тэга <script>
Вставляете код внутрь тэга.
Если необходимо переключаетесь в визуальный редактор. Стоит отметить что в визуальном редакторе вы будете просто видеть текст. А при просмотре уже всё будет нормально.

ActionScript3
ActionScript3
<script type="syntaxhighlighter" class="brush:as3"><![CDATA[

]]></script>


ActionScript3
<script type="syntaxhighlighter" class="brush:actionscript3"><![CDATA[


]]></script>


Bash/shell
<script type="syntaxhighlighter" class="brush:bash"><![CDATA[


]]></script>


Bash/shell
<script type="syntaxhighlighter" class="brush:shell"><![CDATA[


]]></script>


ColdFusion
<script type="syntaxhighlighter" class="brush:cf"><![CDATA[


]]></script>


ColdFusion
<script type="syntaxhighlighter" class="brush:coldfusion"><![CDATA[


]]></script>


C#
<script type="syntaxhighlighter" class="brush:c-sharp"><![CDATA[


]]></script>


C#
<script type="syntaxhighlighter" class="brush:csharp"><![CDATA[


]]></script>


C++
<script type="syntaxhighlighter" class="brush:cpp"><![CDATA[


]]></script>


C++
<script type="syntaxhighlighter" class="brush:c"><![CDATA[


]]></script>


CSS
<script type="syntaxhighlighter" class="brush:css"><![CDATA[


]]></script>


Delphi
<script type="syntaxhighlighter" class="brush:delphi"><![CDATA[


]]></script>


Delphi
<script type="syntaxhighlighter" class="brush:pas"><![CDATA[


]]></script>


Delphi
<script type="syntaxhighlighter" class="brush:pascal"><![CDATA[


]]></script>


Diff
<script type="syntaxhighlighter" class="brush:diff"><![CDATA[


]]></script>

Diff
<script type="syntaxhighlighter" class="brush:patch"><![CDATA[


]]></script>


Erlang
<script type="syntaxhighlighter" class="brush:erl"><![CDATA[


]]></script>


Erlang
<script type="syntaxhighlighter" class="brush:erlang"><![CDATA[


]]></script>


Groovy
<script type="syntaxhighlighter" class="brush:groovy"><![CDATA[


]]></script>


JavaScript
<script type="syntaxhighlighter" class="brush:js"><![CDATA[


]]></script>


JavaScript
<script type="syntaxhighlighter" class="brush:jscript"><![CDATA[


]]></script>


JavaScript
<script type="syntaxhighlighter" class="brush:javascript"><![CDATA[


]]></script>


Java
<script type="syntaxhighlighter" class="brush:java"><![CDATA[


]]></script>


JavaFX
<script type="syntaxhighlighter" class="brush:jfx"><![CDATA[


]]></script>


JavaFX
<script type="syntaxhighlighter" class="brush:javafx"><![CDATA[


]]></script>


Perl
<script type="syntaxhighlighter" class="brush:perl"><![CDATA[


]]></script>


Perl
<script type="syntaxhighlighter" class="brush:pl"><![CDATA[


]]></script>


PHP
<script type="syntaxhighlighter" class="brush:php"><![CDATA[


]]></script>


Plain Text
<script type="syntaxhighlighter" class="brush:plain"><![CDATA[


]]></script>


Plain Text
<script type="syntaxhighlighter" class="brush:text"><![CDATA[


]]></script>


PowerShell
<script type="syntaxhighlighter" class="brush:ps"><![CDATA[


]]></script>


PowerShell
<script type="syntaxhighlighter" class="brush:powershell"><![CDATA[


]]></script>


Python
<script type="syntaxhighlighter" class="brush:py"><![CDATA[


]]></script>


Python
<script type="syntaxhighlighter" class="brush:python"><![CDATA[


]]></script>


Ruby
<script type="syntaxhighlighter" class="brush:rails"><![CDATA[


]]></script>


Ruby
<script type="syntaxhighlighter" class="brush:ror"><![CDATA[


]]></script>


Ruby
<script type="syntaxhighlighter" class="brush:ruby"><![CDATA[


]]></script>


Scala
<script type="syntaxhighlighter" class="brush:scala"><![CDATA[


]]></script>


SQL
<script type="syntaxhighlighter" class="brush:sql"><![CDATA[


]]></script>


Visual Basic
<script type="syntaxhighlighter" class="brush:vb"><![CDATA[


]]></script>


Visual Basic
<script type="syntaxhighlighter" class="brush:vbnet"><![CDATA[


]]></script>


XML
<script type="syntaxhighlighter" class="brush:xml"><![CDATA[


]]></script>


XHTML
<script type="syntaxhighlighter" class="brush:xhtml"><![CDATA[


]]></script>


XSLT
<script type="syntaxhighlighter" class="brush:xslt"><![CDATA[


]]></script>


HTML
<script type="syntaxhighlighter" class="brush:html"><![CDATA[


]]></script>

Как наверное Вы заметили, для этого тэга не требуется экранирование специальный символов. То есть на один шаг нужно делать меньше. Но по личному убеждению считаю что нужно пользоваться тэгом <pre> - просто потому что безопасность выше.

P.S. Надо прикрутить ещё спойлер, что бы скрывать код.
P.S.S. В некоторых местах надо кодом всплывает флэш панелька, которая позволяет делать различные действия. Так вот для версии 2.х.х это происходит без проблем. А тут у меня так и не получилось, что бы панелька всплывала. Если у Вас получится - сообщите пожалуйста как Вы это сделали.

Warlon blog

вторник, 12 апреля 2011 г.

Учим blogspot подсвечивать исходный код

1 комментарий:

вторник, 12 апреля 2011 г.

Учим blogspot подсвечивать исходный код

1 комментарий:

вторник, 12 апреля 2011 г.