вторник, 24 мая 2011 г.

Делаем подсветку кода в Blogger - версия 2

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

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


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


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


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


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


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


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


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

  1. В панели управления идём в меню "Дизайн" и там выбираем пункт "Изменить HTML".
  2. Делаем резервную копию текущего шаблона. Для этого выбираем пункт "Загрузить весь шаблон". Называем файл удобным именем. Лично я в качестве имени файла выбираю такой шаблон [имя блога]-template-[ddMMyyyyHHmm].xml. Например sedegoff-template-200420110859.xml
  3. Ищем конструкцию </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-->
    
    
  4. Сохраняете шаблон
Порядок использования:
  1. Используя инструмент типа Quick Escape, экранируйте служебные символы. Нужно это для того, что бы не получить сообщение "Ваш код HTML не может быть принят: Недопустимый тег: LINK"
  2. Переключаетесь в режим "Изменить HTML"
  3. Вводите конструкцию <pre><code>...</code></pre>, где место троеточия вставляете код из пункта 1.
  4. Если необходимо переключаетесь в визуальный редактор. Стоит отметить что в визуальном редакторе вы будете просто видеть текст. А при просмотре уже всё будет нормально.


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

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


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

  1. Изменение размера табуляции. Вы можете заменить символы TAB ('\x09'), используемые для отступов, на фиксированное количество пробелов или на отдельный <span>, чтобы задать ему какой-нибудь специальный стиль:
    <script>
      hljs.tabReplace = '    '; // 4 spaces
      // ... or hljs.tabReplace = '<span class="indent">\t</span>';
    
      hljs.initHighlightingOnLoad();
    </script>
  2. Если вы используете другие теги для блоков кода, вы можете инициализировать их явно с помощью функции 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)});
  3. Размеченным классами элементам кода можно задать желаемые стили например так:
    .comment {
      color: gray;
    }
    
    .keyword {
      font-weight: bold;
    }
    
    .python .string {
      color: blue;
    }
    
    .html .atribute .value {
      color: green;
    }



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

    <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>
напишите один или несколько  приведённых ниже языков:
Язык: Bash
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/bash.js"></script>

Язык: Erlang
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/erlang.js"></script>

Язык: Cs
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/cs.js"></script>

Язык: Ruby
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/ruby.js"></script>

Язык: Diff
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/diff.js"></script>

Язык: Rib
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/rib.js"></script>

Язык: Rsl
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/rsl.js"></script>

Язык: Javascript
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/javascript.js"></script>

Язык: Lua
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/lua.js"></script>

Язык: Css
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/css.js"></script>

Язык: Xml
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/xml.js"></script>

Язык: Lisp
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/lisp.js"></script>

Язык: Profile
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/profile.js"></script>

Язык: Java
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/java.js"></script>

Язык: Php
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/php.js"></script>

Язык: Haskell
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/haskell.js"></script>

Язык: 1c
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/1c.js"></script>

Язык: Python
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/python.js"></script>

Язык: Smalltalk
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/smalltalk.js"></script>

Язык: Tex
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/tex.js"></script>

Язык: Sql
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/sql.js"></script>

Язык: Vala
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/vala.js"></script>

Язык: Ini
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/ini.js"></script>

Язык: Axapta
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/axapta.js"></script>

Язык: Perl
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/perl.js"></script>

Язык: Scala
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/scala.js"></script>

Язык: Cmake
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/cmake.js"></script>

Язык: Objectivec
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/objectivec.js"></script>

Язык: Avrasm
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/avrasm.js"></script>

Язык: Vhdl
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/vhdl.js"></script>

Язык: Nginx
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/nginx.js"></script>

Язык: Erlang_repl
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/erlang_repl.js"></script>

Язык: Django
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/django.js"></script>

Язык: Delphi
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/delphi.js"></script>

Язык: Vbscript
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/vbscript.js"></script>

Язык: Mel
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/mel.js"></script>

Язык: Dos
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/dos.js"></script>

Язык: Apache
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/apache.js"></script>

Язык: Cpp
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/cpp.js"></script>

Язык: Parser3
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/parser3.js"></script>

Язык: Go
<script src="http://sedegoff-blogger.googlecode.com/svn/blogger/js/highlight/languages/go.js"></script>




Комментариев нет: