Подсветка кода на основе SyntaxHighlighter
Есть один известный плагин, который называется SyntaxHighlighter. Именно этим плагином пользуется большинство веб-мастеров для подсветки синтаксиса кодов в своих материалах и я когда-то тоже его применял. Наверное уже кто-то подумал, что я буду рассказывать, как установить и как пользоваться данным плагином. Увы, но вышеупомянутый плагин нам понадобиться лишь в качестве исходного материала и устанавливать мы его не будем. Мы просто возьмем из него самое необходимое, немного модернизируем, а результат интегрируем в шаблон.
Чего мы добьемся всеми этими действиями?
Прежде всего мы до минимум сократим количество подключаемых JS-файлов (файлов с расширением .js), что безусловно скажется на скорости загрузки сайта и общей нагрузке на сервер, но кроме того нам предстоит сократить JavaScript в отобранных файлах до возможного предела, чтобы соблюсти рекомендации PageSpeed.
Кто сталкивался с плагином SyntaxHighlighter, тот знает сколько JS-файлов он подключает и как это тормозит загрузку страницы.
Материал довольно не простой, но надеюсь, что веб-мастерам, публикующим на своих сайтах различные коды, данный пост будет полезен. Поехали!
Разбираем плагин SyntaxHighlighter
Как я уже говорил выше, мы будем использовать плагин SyntaxHighlighter лишь как строительный материал и нам не потребуется его установка, но тем не менее скачать его придется и скачать его можно здесь.
Итак скачиваем плагин и распаковываем архив в любое место на компьютере. Открываем папку «syntaxhighlighter», где нам нужна папка «syntaxhighlighter2»:
Далее переходим в папку «scripts». В общем наш путь должен быть таким: syntaxhighlighter\syntaxhighlighter2\scripts
Открываем конечную папку и видим ряд файлов с расширением .js:
Как видите, из всего списка на понадобится всего три файла:
shCore.js
shBrushCss.js
shBrushPhp.js
Из которых в последствии останется только два, но об этом чуть позже.
Копируем выбранные файлы в отдельную папку, возвращаемся на шаг назад и открываем папку «styles» (путь: syntaxhighlighter\syntaxhighlighter2\styles), где находятся файлы с расширением .css и изображения:
Здесь из 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 и вставляем скопированный код в верхнее поле. Выбираем «Нормальное сжатие» и жмем на кнопку «Получить код»:
Заменяем содержимое файла shBrushPhp.js на оптимизированный скрипт и не забываем сохранить изменения. На этом с оптимизацией JS-файлов мы закончили. Движемся дальше.
Оптимизация CSS
Подошла очередь «поиздеваться» над файлом shCore.css. Открываем файл и удаляем все комментарии разработчиков из верхней части.
Далее нам надо изменить путь до служебных картинок, которые мы позаимствовали у плагина SyntaxHighlighter. Ищем такие три строчки:
Строчка №208:
1 | background-image: url(page_white_code.png) !important; |
Строчка №213:
1 | background-image: url(printer.png) !important; |
Строчка №225:
1 | background-image: url(help.png) !important; |
Добавляем к названию картинок, название папки, где они будут храниться. Должно получиться так:
1 | background-image: url(images/page_white_code.png) !important; |
2 | background-image: url(images/printer.png) !important; |
3 | background-image: url(images/help.png) !important; |
Можно было конечно ничего не менять, но тогда картинки пришлось бы загружать в корень шаблона, где они будут не на своем месте.
Теперь идем на сервис csscompressor.com. Вставляем css-код в поле, выбираем режим наибольшего сжатия «Highest (no readability, smallest size)» и жмем на кнопку «Compress»:
Сжатый css-код можно временно сохранить в отдельном файле, так как чуть позже мы его переместим в другое место.
Переходим к завершающему этапу реализации подсветки кода на сайте.
Подсветка кода прямо из шаблона
Итак, файлы мы оптимизировали, теперь нам их надо внедрить в шаблон. Для этого подключаем к серверу FTP клиент и открываем в программе папку с темой.
Нам нужна папка с названием js:
Помещаем в данную папку файлы shCore.js и shBrushPhp.js. Если такой папки нет, то ее надо создать.
Далее, возвращаемся в корень темы и открываем папку images:
Закидываем в папку 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 выставляем следующую функцию:
01 | function mayak_converter_php($attr, $content = null){ |
02 | $mayak_puh = $content; |
03 | $mayak_van = array('»', '‘', '’'); |
04 | $mayak_too = array('"', ''', '''); |
05 | $mayak_rezult = str_replace($mayak_van, $mayak_too, $mayak_puh); |
06 | $mayak_php = strip_tags($mayak_rezult); |
07 | return '<pre class="brush: php">'.$mayak_php.'</pre>'; |
08 | } |
09 | function mayak_converter_css($attr, $content = null){ |
10 | $mayak_a = $content; |
11 | $mayak_b = array('»', '‘', '’'); |
12 | $mayak_c = array('"', ''', '''); |
13 | $mayak_put = str_replace($mayak_b, $mayak_c, $mayak_a); |
14 | $mayak_css = strip_tags($mayak_put); |
15 | return '<pre class="brush: php">'.$mayak_css.'</pre>'; |
16 | } |
17 | add_shortcode ('php','mayak_converter_php'); |
18 | add_shortcode ('css','mayak_converter_css'); |
Теперь PHP и Javascript коды (в принципе может быть любой язык программирования) можно оборачивать в шроткод:
1 | [php]любой код[/php] |
А при публикации css-кодов:
1 | [css]любой код[/css] |
Можно пойти еще дальше и сделать отдельную кнопку в редакторе WordPress. Я именно так и поступил.
