Подсветка кода в блоге на Blogger.com (blogspot.com)

При публикации на страницах блога программного кода, возникает вопрос его красивого, и главное, доступного, оформления.

Существует множество скриптов и решений данного вопроса, но как организовать подсветку в блоге, размещенном на Blogger.com. Хочу поделиться парой доступных и простых решений, возможно кому то оно окажется полезным.


1. JQuery Sintax Highlight

Первое решение это плагин для яваскриптовой библиотеки JQuery - JQuery Sintax Highlight Plugin. Чтобы подключить данный плагин, для начала, нам понадобится подключить непосредственно саму JQuery библиотеку. Для этого заходим в админку блога, выбираем вкладку "Дизайн"  и "Изменить HTML". далее после тега <title><data:blog.pageTitle/></title> пишем следующее:

<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
    google.load(&quot;jquery&quot;, &quot;1.5&quot;);
</script> 

Ниже добавляем код подключения плагина с сайта разработчиков:

<link href='http://webcodingstudio.com/modules/highlight/frontend/highlight.css?1282949674' media='all' rel='stylesheet' type='text/css'/>
<script src='http://webcodingstudio.com/modules/highlight/frontend/highlight.js?1268429770' type='text/javascript'/>

Теперь для подсветки синтаксиса можно использовать тег <pre class="code"></pre>. При чем для разных языков доступны свои варианты подсветки:

<pre class="code">default</pre>
<pre class="code" lang="js">js code</pre>
<pre class="code" lang="css">css code</pre>
<pre class="code" lang="html">html code</pre>
<pre class="code" lang="php">php code</pre>

2. SyntaxHighlighter

Другое решение не предполагает использование JQuery библиотеки, и на этом решении я остановил свой выбор.

SyntaxHighlighter представляет собой полностью функциональный, автономный код подсветки синтаксиса, разработан на JavaScript. Чтобы получить представление о том, на что способен SyntaxHighlighter, достаточно посетить демонстрационную страницу.

Теперь разберемся как это подключить.

Аналогично с первым вариантом заходим в админку блога, выбираем вкладку "Дизайн"  и "Изменить HTML". далее в окне редактора шаблона, после тега <title><data:blog.pageTitle/></title> пишем следующее:

<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'/>
<!-- add brushes here -->
<script type='text/javascript'>
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.all();
</script>

После комментария "add brushes here," добавляем скрипты для обработки тех языков, подсветку которых мы хотим использовать. В следующем примере будет использована подсветка для Javascript, SQL, XML/HTML, and PHP:

<!-- add brushes here -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>

Осталось только сохранить изменения шаблона и приступать к использованию. Для того чтобы скрипт автоматически "раскрашивал" и размечал код, его необходимо разместить в теги <pre class="brush:[язык подсветки]">. Например, для подсветки блока с SQL-запросом:

<pre class="brush:sql">
SELECT *
FROM users
WHERE user_id = 1212;
</pre>