При публикации на страницах блога программного кода, возникает вопрос его красивого, и главное, доступного, оформления.
Существует множество скриптов и решений данного вопроса, но как организовать подсветку в блоге, размещенном на 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("jquery", "1.5");
</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>
