Warlon blog: Делаем подсветку кода в Blogger

На момент написание этого сообщения, для подсветки кода у меня стоит решение от SyntaxHighlighter от Алексея Горбачёва. Но я решил от него отказаться и перейти на другое решение.

Почему я это сделал?

Ну во первых - я проанализировал время загрузки страницы блога - очень много уходит время на загрузку скриптов и стилей с сайта автора.

Во вторых я разобрался как хранить на сайте http://code.google.com. Об этом я напишу отдельно, но теперь я могу складывать там и таблицы стилей и файлы скриптов.

Ну и в третьих - следствие первого и второго. Чем больше страница грузит файлов с внешних источников, тем дольше она загружается. Если посмотреть всякие статьи по оптимизации работы сайта, то один из первых советов - количество внешних файлов и картинок должно быть минимально. Поэтому все настройки для блога я положу у себя в один файл.

Кстати, нашёл ещё одно решение для подсветки кода - от компании Google. Копировать себе текст не буду - прочитайте в другом блоге тут.

Я же за основу взял решение HIGHLIGHT.JS. Я взял упакованные библиотеки и разместил у себя (смотри третью причину ухода с библиотеки Горбачёва). Но для удобства я размещу остальные библиотеки у себя же.

Но если Вам надо подсветить только раз или два синтаксис, то проще будет воспользоваться инструментом раскраски исходного кода. Чуть позже я его размещу у себя - сейчас идёт тестирование.

Итак, подключаем решение от HIGHLIGHT.JS:

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

Ищем конструкцию </head> и над ней вставляем код:

<!-- HIGHLIGHT.JS BEGIN -->
<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/default.css">
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- HIGHLIGHT.JS  END-->

Сохраняете шаблон

Порядок использования:

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

Определение языка, на котором написан фрагмент, делается с помощью довольно простой эвристики: программа пытается расцветить фрагмент всеми языками подряд, и для каждого языка считает количество подошедших синтаксически конструкций и ключевых слов. Для какого языка нашлось больше, тот и выбирается.

Это означает, что в коротких фрагментах высока вероятность ошибки, что периодически и случается. Чтобы указать язык фрагмента явно, надо написать его название в виде класса к элементу <code>:

<pre><code class="html">...</code></pre>

Язык: Bash

<pre><code class="bash"> Тут разместите Ваш код</code></pre>

Язык: Erlang

<pre><code class="erlang"> Тут разместите Ваш код</code></pre>

Язык: Cs

<pre><code class="cs"> Тут разместите Ваш код</code></pre>

Язык: Ruby

<pre><code class="ruby"> Тут разместите Ваш код</code></pre>

Язык: Diff

<pre><code class="diff"> Тут разместите Ваш код</code></pre>

Язык: Rib

<pre><code class="rib"> Тут разместите Ваш код</code></pre>

Язык: Rsl

<pre><code class="rsl"> Тут разместите Ваш код</code></pre>

Язык: Javascript

<pre><code class="javascript"> Тут разместите Ваш код</code></pre>

Язык: Lua

<pre><code class="lua"> Тут разместите Ваш код</code></pre>

Язык: Css

<pre><code class="css"> Тут разместите Ваш код</code></pre>

Язык: Xml, HTML

<pre><code class="xml"> Тут разместите Ваш код</code></pre>

Язык: Lisp

<pre><code class="lisp"> Тут разместите Ваш код</code></pre>

Язык: Profile

<pre><code class="profile"> Тут разместите Ваш код</code></pre>

Язык: Java

<pre><code class="java"> Тут разместите Ваш код</code></pre>

Язык: Php

<pre><code class="php"> Тут разместите Ваш код</code></pre>

Язык: Haskell

<pre><code class="haskell"> Тут разместите Ваш код</code></pre>

Язык: 1c

<pre><code class="1c"> Тут разместите Ваш код</code></pre>

Язык: Python

<pre><code class="python"> Тут разместите Ваш код</code></pre>

Язык: Smalltalk

<pre><code class="smalltalk"> Тут разместите Ваш код</code></pre>

Язык: Tex

<pre><code class="tex"> Тут разместите Ваш код</code></pre>

Язык: Sql

<pre><code class="sql"> Тут разместите Ваш код</code></pre>

Язык: Vala

<pre><code class="vala"> Тут разместите Ваш код</code></pre>

Язык: Ini

<pre><code class="ini"> Тут разместите Ваш код</code></pre>

Язык: Axapta

<pre><code class="axapta"> Тут разместите Ваш код</code></pre>

Язык: Perl

<pre><code class="perl"> Тут разместите Ваш код</code></pre>

Язык: Scala

<pre><code class="scala"> Тут разместите Ваш код</code></pre>

Язык: Cmake

<pre><code class="cmake"> Тут разместите Ваш код</code></pre>

Язык: Objectivec

<pre><code class="objectivec"> Тут разместите Ваш код</code></pre>

Язык: Avrasm

<pre><code class="avrasm"> Тут разместите Ваш код</code></pre>

Язык: Vhdl

<pre><code class="vhdl"> Тут разместите Ваш код</code></pre>

Язык: Nginx

<pre><code class="nginx"> Тут разместите Ваш код</code></pre>

Язык: Erlang_repl

<pre><code class="erlang_repl"> Тут разместите Ваш код</code></pre>

Язык: Django

<pre><code class="django"> Тут разместите Ваш код</code></pre>

Язык: Delphi

<pre><code class="delphi"> Тут разместите Ваш код</code></pre>

Язык: Vbscript

<pre><code class="vbscript"> Тут разместите Ваш код</code></pre>

Язык: Mel

<pre><code class="mel"> Тут разместите Ваш код</code></pre>

Язык: Dos

<pre><code class="dos"> Тут разместите Ваш код</code></pre>

Язык: Apache

<pre><code class="apache"> Тут разместите Ваш код</code></pre>

Язык: Cpp

<pre><code class="cpp"> Тут разместите Ваш код</code></pre>

Язык: Parser3

<pre><code class="parser3"> Тут разместите Ваш код</code></pre>

Язык: Go

<pre><code class="go"> Тут разместите Ваш код</code></pre>

Можно использовать рекомендованные в HTML5 названия классов: "language-html", "language-php". Также можно назначать классы на элемент <pre>.

Чтобы запретить расцветку фрагмента вообще, используется класс "no-highlight":

<pre><code class="no-highlight">...</code></pre>

И теперь немного про настройку:

Изменение размера табуляции. Вы можете заменить символы TAB ('\x09'), используемые для отступов, на фиксированное количество пробелов или на отдельный <span>, чтобы задать ему какой-нибудь специальный стиль:
```
<script>
  hljs.tabReplace = '    '; // 4 spaces
  // ... or hljs.tabReplace = '<span class="indent">\t</span>';

  hljs.initHighlightingOnLoad();
</script>
```
Если вы используете другие теги для блоков кода, вы можете инициализировать их явно с помощью функции highlightBlock(code, tabReplace). Она принимает DOM-элемент с текстом расцвечиваемого кода и опционально - строчку для замены символов TAB. Например с использованием jQuery код инициализации может выглядеть так:
```
$(document).ready(function() {
  $('pre code').each(function(i, e) {hljs.highlightBlock(e, '    ')});
});
```
Если ваш блок кода использует <br> вместо переводов строки (т.е. если это не <pre>), передайте true третьим параметром в highlightBlock:
```
$('div.code').each(function(i, e) {hljs.highlightBlock(e, null, true)});
```

Размеченным классами элементам кода можно задать желаемые стили например так:

.comment {
  color: gray;
}

.keyword {
  font-weight: bold;
}

.python .string {
  color: blue;
}

.html .atribute .value {
  color: green;
}

Так же можно использовать различные стили для отображения, для этого вместо строки:

<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/default.css">

Укажите один из доступных стилей:

Стиль: Default

<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/default.css">

Стиль: Dark

<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/dark.css">

Стиль: FAR

<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/far.css">

Стиль: IDEA

<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/idea.css">

Стиль: Sunburst

<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/sunburst.css">

Стиль: Zenburn

<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/zenburn.css">

Стиль: Visual Studio

<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/vs.css">

Стиль: Ascetic

<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/ascetic.css">

Стиль: Magula

<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/magula.css">

Стиль: GitHub

<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/github.css">

Стиль: Brown Paper

<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/brown_paper.css">

Стиль: School Book

<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/school_book.css">

Стиль: IR Black

<link rel="stylesheet" href="http://sedegoff-blogger.googlecode.com/svn/blogger/css/highlight/ir_black.css">

Собственно теперь самое противное - обойти предыдущие статьи и в них заменить конструкции кода, на нужные.

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

Для этого вместо конструкции:

<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/highlight.pack.js"></script>

напишите один или несколько приведённых ниже языков: