вторник, 17 апреля 2012 г.

Подсветка синтаксиса кода в блоге на blogger: SyntaxHighlighter, JQuery Sintax Highlight, Highlight.js и Google's Code Prettify

Обзор библиотек подсветки синтаксиса кода
Перед любым блогером в тот или иной момент возникает проблема подсветки синтаксиса кода в постах своего блога. Представьте, Вы придумали красивое и изящное решение давно мучающей Вас проблемы, написали пост об этом, вставили код. Но... На страницах Вашего блога код выглядит не так, как в любимом HTML-редакторе.
Я захотел избавиться от этой проблемы и помог мне всеми любимый Яндекс.
Существуют по крайней мере 4 относительно популярные библиотеки для подсветки синтаксиса кода:

 Попробуем установить каждую из библиотек и посмотрим, какой функционал они предлагают.

Подсветка синтаксиса кода SyntaxHighlighter

Подсветка синтаксиса кода SyntaxHighlighter
SyntaxHighlighter - мощная и функциональная JavaScript-библиотека. Вот ее демонстрационная страница. Я использую ее для подсветки синтаксиса в моей статье Как сменить пароль админа в Joomla. Чтобы подключить данную библиотеку, нужно вставить сам код библиотеки в шаблон сайта. В случае с блогом на платформе blogger.com | blogspot действия такие:
  1. Заходим в админку блога
  2. Переходим на вкладку "Дизайн" и жмем "Изменить HTML"
  3. СОХРАНЯЕМ ШАБЛОН! Нажав кнопку "Загрузить весь шаблон". Это обязательно сделать во избежание негативных последствий, лесных пожаров в Подмосковье и ядерной войны с Америкой.
  4. Нужно найти код <title><data:blog.pageTitle/></title> и после него вставить следующее:
  5. 
    
    
    
    
    
  6. После комментария "add brushes here" нужно добавить скрипты для подсветки тех языков, код которых мы хотим показать на странице. В коде ниже будет использована подсветка для Javascript, SQL, XML/HTML, и PHP:
  7. 
    
    
    
    
  8. Чтобы подсвечивать html или xml код, при написании или редактировании поста нужно сделать так:
  9. 
    
Возможно, что подсветка синтаксиса кода в Вашем блоге blogspot будет работать. А возможно, что и не будет. Если не работает, скорее всего у Вас модифицированный шаблон. У меня модифицированный. Поэтому код подсветки я вставил после:

<data:blog.pageTitle/> 

<data:blog.pageName/> ~ <data:blog.title/>

подсветка синтаксиса кода - выход есть!

Библиотека подсветки синтаксиса JQuery Sintax Highlight

Библиотека подсветки синтаксиса JQuery Sintax Highlight
Чтобы установить эту библиотеку, нужно с точностью повторить пункты 1-3. Начну с пункта 4:
  • Подключаем JQuery. В шаблон вставить такой код:
  • <script src='http://www.google.com/jsapi' type='text/javascript'/>
    <script type='text/javascript'>
       google.load(&quot;jquery&quot;, &quot;1.5&quot;);
    </script> 
    
  • Теперь нужно подключить код самой библиотеки Sintax Highlight. Ниже вставляем код:
  • <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">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>
    
Я убрал код этой библиотеки из шаблона для уменьшения времени загрузки страниц. Посмотрите на демонстрационной странице, как она может подсвечивать код.

Отечественная библиотека подсветки синтаксиса кода - Highlight.js

Отечественная библиотека подсветки синтаксиса кода - Highlight.js
Данная библиотека поддерживает 46 языков. Неполный список:
  • PHP
  • HTML
  • JavaScript
  • Ruby
  • Haskell
  • и даже... 1С
Установка этой библиотеки абсолютно аналогична предыдущим, разве что код другой :). Начнем с пункта 4:
  • Перед тегом </head> нужно вставить такой код:
  • 
    
    
    
  • Чтобы ускорить распознавание кода, можно указать необходимые языки:
  • 
    
    
  • Как Вы заметили, CSS-файл со стилями здесь отсутсвует. Поэтому стили придется прописать вручную:
    
    .comment {
    color: gray;
    }
    
    .keyword {
    font-weight: bold;
    }
    
    .html .atribute .value {
    color: green;
    }
    
  • Чтобы использовать подсветку, нужный код оформляем тегами:
  • 
    <pre><code class="html">...</code></pre>
    
Подсветку от этой библиотеки я отключил, чтобы не конфликтовала с SyntaxHighlighter.

Подсветка синтаксиса кода от Империи Зла - Google's Code Prettify

Подсветка синтаксиса кода Google's Code Prettify
Особо расписывать не буду, устал. Да и хочется начать изучение немного другой темы. Возможности подсветки кода от этой поделки можно посмотреть тут. Итак, как установить библиотеку от Гугла?
  • Перед тегом </head> вставляем такой код:

  • 
    
    

  • Тег <body> приводим к такому виду:
  • 
    
  • Чтобы пользоваться подсветкой, оформляем код так:
  • <pre class="prettyprint">
        // add your code here
    </pre>
    
Вот и все:) На десерт:

2 коммент.: