» » » Подсветка кода на основе SyntaxHighlighter
logotip

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

Всем привет! Сегодня на seo-mayak.com, по просьбам читателей, я расскажу, как реализована подсветка кода у меня на блоге.

Есть один известный плагин, который называется SyntaxHighlighter. Именно этим плагином пользуется большинство веб-мастеров для подсветки синтаксиса кодов в своих материалах и я когда-то тоже его применял.

Я не зря заговорил о плагине SyntaxHighlighter, так как именно его мы сегодня будет разбирать.

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

syntaxhighlighter

Чего мы добьемся всеми этими действиями?

Прежде всего мы до минимум сократим количество подключаемых JS-файлов (файлов с расширением .js), что безусловно скажется на скорости загрузки сайта и общей нагрузке на сервер, но кроме того нам предстоит сократить JavaScript в отобранных файлах до возможного предела, чтобы соблюсти рекомендации PageSpeed.

Кто сталкивался с плагином SyntaxHighlighter, тот знает сколько JS-файлов он подключает и как это тормозит загрузку страницы.

Материал довольно не простой, но надеюсь, что веб-мастерам, публикующим на своих сайтах различные коды, данный пост будет полезен. Поехали!

Разбираем плагин SyntaxHighlighter

Как я уже говорил выше, мы будем использовать плагин SyntaxHighlighter лишь как строительный материал и нам не потребуется его установка, но тем не менее скачать его придется и скачать его можно здесь.

Итак скачиваем плагин и распаковываем архив в любое место на компьютере. Открываем папку «syntaxhighlighter», где нам нужна папка «syntaxhighlighter2»:

podsvetka koda

Далее переходим в папку «scripts». В общем наш путь должен быть таким: syntaxhighlighter\syntaxhighlighter2\scripts

Открываем конечную папку и видим ряд файлов с расширением .js:

podsvetka koda2

Как видите, из всего списка на понадобится всего три файла:

shCore.js
shBrushCss.js
shBrushPhp.js

Из которых в последствии останется только два, но об этом чуть позже.

Копируем выбранные файлы в отдельную папку, возвращаемся на шаг назад и открываем папку «styles» (путь: syntaxhighlighter\syntaxhighlighter2\styles), где находятся файлы с расширением .css и изображения:

podsvetka koda3

Здесь из css-файлов нам понадобится всего один:

shCore.css

А также три изображения:

help.png
printer.png
page_white_code.png

Копируем все вышеперечисленное в отдельную папку и все, плагин SyntaxHighlighter нам более не нужен. Теперь мы будем работать только с теми файлами, которые мы отсортировали. И начнем мы с сокращения JavaScript.

Как сократить JavaScript

Открываем в текстовом редакторе файл shCore.js (для редактирования файлов советую пользоваться Notepad++) и удаляем из него все лишнее, т.е. все строчки, которые находятся между символами /* и */.

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

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

На очереди у нас два файла, которые можно и нужно оптимизировать, дабы выполнить рекомендации PageSpeed: shBrushCss.js и shBrushPhp.js.

Для начала нам надо сделать из двух файлов один. Должен получиться следующий код:

Открыть

Можете самостоятельно объединить файлы или просто скопировать мой вариант.

Сохраняем файл под названием shBrushPhp.js.

Теперь идем на сервис info-pages.com.ua и вставляем скопированный код в верхнее поле. Выбираем «Нормальное сжатие» и жмем на кнопку «Получить код»:

podsvetka koda4

Заменяем содержимое файла shBrushPhp.js на оптимизированный скрипт и не забываем сохранить изменения. На этом с оптимизацией JS-файлов мы закончили. Движемся дальше.

Оптимизация CSS

Подошла очередь «поиздеваться» над файлом shCore.css. Открываем файл и удаляем все комментарии разработчиков из верхней части.

Далее нам надо изменить путь до служебных картинок, которые мы позаимствовали у плагина SyntaxHighlighter. Ищем такие три строчки:

Строчка №208:

background-image: url(page_white_code.png) !important;

Строчка №213:

background-image: url(printer.png) !important;

Строчка №225:

background-image: url(help.png) !important;

Добавляем к названию картинок, название папки, где они будут храниться. Должно получиться так:

background-image: url(images/page_white_code.png) !important;
background-image: url(images/printer.png) !important;
background-image: url(images/help.png) !important;

Можно было конечно ничего не менять, но тогда картинки пришлось бы загружать в корень шаблона, где они будут не на своем месте.

Теперь идем на сервис csscompressor.com. Вставляем css-код в поле, выбираем режим наибольшего сжатия «Highest (no readability, smallest size)» и жмем на кнопку «Compress»:

podsvetka koda8

Сжатый css-код можно временно сохранить в отдельном файле, так как чуть позже мы его переместим в другое место.

Переходим к завершающему этапу реализации подсветки кода на сайте.

Подсветка кода прямо из шаблона

Итак, файлы мы оптимизировали, теперь нам их надо внедрить в шаблон. Для этого подключаем к серверу FTP клиент FileZilla и открываем в программе папку с темой.

Обязательно сделайте резервную копию файлов шаблона, на случай если что-то пойдет не так.

Нам нужна папка с названием js:

podsvetka koda6

Помещаем в данную папку файлы shCore.js и shBrushPhp.js. Если такой папки нет, то ее надо создать.

Далее, возвращаемся в корень темы и открываем папку images:

podsvetka koda7

Закидываем в папку images изображения: help.png, printer.png и page_white_code.png. Данная папка должна иметься в любом шаблоне, хотя могут быть и исключения. Если такой папки нет, то тоже создаем ее.

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

Открываем уже имеющийся в шаблоне файл style.css (для редактирования файлов на сервере, советую пользоваться FTP клиентом Notepad++) и в самый конец, после последней скобки, вставляем наш сжатый CSS-код.

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

Если же ничего не изменилось и сайт корректно отображается, то движемся дальше.

Нам осталось подключить к сайту библиотеку SyntaxHighlighter и js-файлы.

Для этого открываем файл footer.php и после тега </body> вставляем следующее:

1. Подключаем библиотеку SyntaxHighlighter:

<script type="text/javascript">SyntaxHighlighter.all();</script>

2. Подключаем файл shCore.js:

<script type="text/javascript" src="http://Ваш домен/wp-content/themes/Название Вашей темы/js/shCore.js"></script>

3. Подключаем файл shBrushPhp.js:

<script type="text/javascript" src="http://Ваш домен/wp-content/themes/Название Вашей темы/js/shBrushPhp.js"></script>

В принципе все! Интеграция SyntaxHighlighter в шаблон прошла успешно, но осталась одна маленькая деталь, а именно: как код в записи будет взаимодействовать с библиотекой SyntaxHighlighter?

Взаимодействие редактора TinyMCE с библиотекой SyntaxHighlighter

Взаимодействие с SyntaxHighlighter происходит посредством добавления классов в запись. Структура такая:

1. Для php и JavaScript кодов:

<pre class="brush: php">
Любой php или JavaScript код
</pre>

Для CSS-кодов:

<pre class="brush: css">
Любой CSS-код
</pre>

Известно, что в редакторе TinyMCE WordPress, классы можно добавлять только html-режиме, причем сам код должен быть обращен в HTML-сущность , иначе вместо того, чтобы отображаться, код будет выполнятся.

Если же вставлять код в визуальном режиме, то TinyMCE автоматически трансформирует символы в их HTML-сущности, но тогда придется постоянно переключать режимы, чтобы вставить классы, мало того символ двойных кавычек ("), WordPress почему-то заменяет французскими кавычками (»). В общем чехарда полная.

В плагине SyntaxHighlighter все эти проблемы конечно решены. Символы отображаются корректно, а классы заменяются шорткодом:

[php]любой код[/php]

Шорткоды можно прописывать в визуальном режиме, что значительно упрощает весь процесс.

Все вышеописанные проблемы заставили меня найти решение в обход плагина. Решение оказалось простое, хотя так всегда кажется, когда все уже позади.

Открываем файл functions.php, что находится в папке с темой и в самое начало после знака <?php выставляем следующую функцию:

function mayak_converter_php($attr, $content = null){
$mayak_puh = $content;
$mayak_van = array('&#187;', '&#8216;', '&#8217;');
$mayak_too = array('&quot;', '&apos;', '&apos;');
$mayak_rezult = str_replace($mayak_van, $mayak_too, $mayak_puh);
$mayak_php = strip_tags($mayak_rezult);
return '<pre class="brush: php">'.$mayak_php.'</pre>';
}
function mayak_converter_css($attr, $content = null){
$mayak_a = $content;
$mayak_b = array('&#187;', '&#8216;', '&#8217;');
$mayak_c = array('&quot;', '&apos;', '&apos;');
$mayak_put = str_replace($mayak_b, $mayak_c, $mayak_a);
$mayak_css = strip_tags($mayak_put);
return '<pre class="brush: css">'.$mayak_css.'</pre>';
}
add_shortcode ('php','mayak_converter_php');
add_shortcode ('css','mayak_converter_css');

Теперь PHP и Javascript коды (в принципе может быть любой язык программирования) можно оборачивать в шроткод:

[php]любой код[/php]

А при публикации css-кодов:

[css]любой код[/css]

Можно пойти еще дальше и сделать отдельную кнопку в редакторе WordPress. Я именно так и поступил.

До встречи!

P.S. Подписывайтесь на обновления блога, я же готов ответить на Ваши вопросы в комментариях.

С уважением, Виталий Кириллов

(предыдущая статья)

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

  1. Сергей:

    Спасибо за статью! Мне, как одному из тех кто просил рассказать об этом, очень интересно ознакомиться с ней и применить на практике.

    Однако возникает вопрос: при использовании плагина скрипты загружаются только на тех страницах, где используется код в статьях. В данном же случае скрипт подключается на всех без исключения страницах. Можно с этим что либо сделать?

    Ответить
    • Виталий Кириллов:

      Возможно и можно. У меня коды почти на всех страницах, поэтому я не заморачивался данным вопросом. Надо будет подумать над условием, если руки дойдут)

      Ответить
      • Сергей:

        Наверно в плагине уже есть готовая функция, только найти бы ее)

        Кстати, а почему бы не объединить в один файл скрипты shCore.js и shBrushPhp.js?

        Ответить
        • Виталий Кириллов:

          Пробовал, но не тут то было)

          Ответить
      • Егор:

        function portfolio_scripts_styles() {
        // Loads single page script.
        if ( is_single(‘2821’) )
        wp_enqueue_script( ‘otziv’, get_template_directory_uri() . ‘/portfolio/rotator/jquery.cbpQTRotator.min.js’, array( ‘jquery’ ), ‘2.9’, true );

        // Loads our stylesheet portfolio.
        if ( is_single(‘2821’) )
        wp_enqueue_style(‘portfolio’, get_template_directory_uri() . ‘/portfolio/portfolio.css’, array(), ‘1.0’ );

        }
        add_action( ‘wp_enqueue_scripts’, ‘portfolio_scripts_styles’ );

        Я вот так подключаю стили и скрипты к отдельной странице в файле functions.php
        A почему вы не регистрируете скрипты в functions.php?

        Ответить
        • Виталий Кириллов:

          Егор, ну почему же не регистрирую… И я знаком с функциями wp_enqueue_scripts() и wp_enqueue_style(). Другое дело, что в своих статьях я показываю подключения стандартным способом, просто новичкам так будет проще, а бывалые и без меня разберутся, как и что им подключать.
          Если Вы про подключение скриптов SyntaxHighlighter для подсветки кода на определенных страницах, то я уже писал в ответе на комментарии, что у меня коды почти на каждой странице и мне нет смысла подключать их, указывая массив id страниц.
          В любом случаи спасибо за участие в жизни блога, думаю инфа будет полезной для тех, кто не знает, как регистрировать скрипты через functions.php.

          Ответить
          • Егор:

            Здравствуйте, я потом так и подумал, что-бы понятней было для блоггеров. Подключение скриптов через функшен это не обязаловка. Просто много слышал, что жалуются, что тот плагин не работает, этот… Одной из причин может быть подключение скриптов о которых WP «не знает». Сталкивался с таким.

            А насчет подключения скриптов на отдельных страницах, выше Сергей спрашивал как подключить скрипты к отдельным страницам, вот я и привел код, он наверняка подписан на комментарии. Взял сразу и скрипты и стили в одну функцию. Все элементарно. 🙂

            А этот плагин действительно нужно «хакнуть», прежде чем использовать. Я проверял его полную версию на влияние на скорость загрузки — крокодил. 80% -он, 20% -остальные 17 плагинов!

            Кстати, не тестировали Google подсветку кода? Я как-то никак до нее не доберусь.

            Ответить
            • Виталий Кириллов:

              Здравствуйте Егор! Плагин SyntaxHighlighter как раз сделан на основе кода Гугла. Страничка так и называется «SyntaxHighlighter — Google Code».

              Ответить
  2. Сергей:

    Только сейчас заметил, что код HTML который вставляю таким способом не весь отражается, обрезаются символы < > и все что в них заключено.

    Может в файл functions.php к тому коду нажно еще что-то добавить?

    Ответить
    • Виталий Кириллов:

      Сергей, попробуйте код предварительно обратить в HTML-сущность.

      Ответить
      • Сергей:

        Да, так работает. Эх все-таки есть ограничения у этого метода подсветки) А вы тоже меняете везде символы на сущность?

        Ответить
        • Виталий Кириллов:

          Сергей, в статье я писал, что редактор WordPress сам переводит символы в их сущности, если вставлять код в визуальном режиме и заключать его в шорткод. Если же вставить код в режиме HTML, при этом не переводя его в сущности, то код будет выполнятся, а не отображаться. Просто вставляйте коды в визуальном режиме.

          Ответить
  3. Дмитрий:

    Не работает в комментариях! Как исправить?

    Есть $content, может к нему добавить $comment какой-нибудь? Я не разбираюсь в этом, подскажите пожалуйста)

    Ответить
    • Виталий Кириллов:

      Дмитрий, я не делал шорт-код для зоны комментариев. В комментариях прекрасно работают классы:

      <pre class="brush: php">
      Любой код
      </pre>
      
      Ответить
  4. Дмитрий:

    Кстати, а почему использовать нужно папку syntaxhighlighter2, а не 3? Третья версия наверное поновее и получше?

    Ответить
    • Виталий Кириллов:

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

      Ответить
  5. Краснова Оксана:

    С первого раза ничего не вышло . Ладно, будем разбираться …

    Ответить
  6. Кред:

    Оксана, сделайте всё как у Виталика и всё будет ОК

    Ответить
  7. Алексей:

    Здравствуйте, у вас хороший блог! Я предлагаю вам обмениваться комментариями для повышения ПФ.

    Ответить
  8. василий:

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

    Ответить
    • Виталий Кириллов:

      Василий, работа довольно не простая! Ищите, где-то ошибка, ведь у меня и на других сайтах все работает. Попробуйте файл стилей подключить отдельно.

      Ответить
      • василий:

        странно конечно, но у меня даже сам плагин в оригинале не работает на блоге как надо. сношу.

        Ответить
  9. Иннокентий:

    Отличное решение, благодарю за проделанную работу, а то уж слишком много подгружает скриптов

    Ответить
  10. Виктор:

    Привет Виталий!

    Как сделать функцию для комментариев? В комментариях тоже код и нужна подсветка.

    Так не работает:

    function mayak_converter_php($attr, $comment = null){
    $mayak_puh = $comment;
    $mayak_van = array('»', '‘', '’');
    $mayak_too = array('"', ''', ''');
    $mayak_rezult = str_replace($mayak_van, $mayak_too, $mayak_puh);
    $mayak_php = strip_tags($mayak_rezult);
    return ''.$mayak_php.'';
    }
    add_shortcode ('php','mayak_converter_php');
    Ответить
    • Виталий Кириллов:

      Так не будет работать
      Вот набросал функцию:

      function mayak_converter_code($attr, $content = null){
      $mayak_puh = $content;
      $mayak_van = array('<', '>', '\'', '\"');
      $mayak_too = array('&lt;','&gt;', '&#039;', '&quot;');
      $mayak_rezult = str_replace($mayak_van, $mayak_too, $mayak_puh);
      $mayak_php = $mayak_rezult;
      return '<pre class="brush: php">'.$mayak_php.'</pre>';
      }
      add_shortcode ('code','mayak_converter_code');
      add_filter( 'comment_text', 'do_shortcode' );

      Шорткод [code]код[/code]

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

      Ответить

Оставить комментарий

Внимание комментатор! Прежде чем вставить: HTML, JavaScript или PHP код в свой комментарий, преобразуй его в html сущность!

Subscribe without commenting

» Подписаться на комментарии по RSS