Подсветка кода на основе 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:

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

Строчка №213:

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

Строчка №225:

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

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

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

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

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

podsvetka koda8

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

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

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

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

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

Нам нужна папка с названием 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:

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

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

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

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

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

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

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

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

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

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

Для CSS-кодов:

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

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

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

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

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

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

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

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

01function mayak_converter_php($attr, $content = null){
02$mayak_puh = $content;
03$mayak_van = array('&#187;', '&#8216;', '&#8217;');
04$mayak_too = array('&quot;', '&apos;', '&apos;');
05$mayak_rezult = str_replace($mayak_van, $mayak_too, $mayak_puh);
06$mayak_php = strip_tags($mayak_rezult);
07return '<pre class="brush: php">'.$mayak_php.'</pre>';
08}
09function mayak_converter_css($attr, $content = null){
10$mayak_a = $content;
11$mayak_b = array('&#187;', '&#8216;', '&#8217;');
12$mayak_c = array('&quot;', '&apos;', '&apos;');
13$mayak_put = str_replace($mayak_b, $mayak_c, $mayak_a);
14$mayak_css = strip_tags($mayak_put);
15return '<pre class="brush: php">'.$mayak_css.'</pre>';
16}
17add_shortcode ('php','mayak_converter_php');
18add_shortcode ('css','mayak_converter_css');

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

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

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

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

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

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.