Всем привет! Сегодня на seo-mayak.com, по просьбам читателей, я расскажу, как реализована подсветка кода у меня на блоге.
Есть один известный плагин, который называется 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:
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»:
Сжатый css-код можно временно сохранить в отдельном файле, так как чуть позже мы его переместим в другое место.
Переходим к завершающему этапу реализации подсветки кода на сайте.
Подсветка кода прямо из шаблона
Итак, файлы мы оптимизировали, теперь нам их надо внедрить в шаблон. Для этого подключаем к серверу FTP клиент FileZilla и открываем в программе папку с темой.
Нам нужна папка с названием 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:
<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('»', '‘', '’');
$mayak_too = array('"', ''', ''');
$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('»', '‘', '’');
$mayak_c = array('"', ''', ''');
$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. Подписывайтесь на обновления блога, я же готов ответить на Ваши вопросы в комментариях.
С уважением, Виталий Кириллов
Спасибо за статью! Мне, как одному из тех кто просил рассказать об этом, очень интересно ознакомиться с ней и применить на практике.
Однако возникает вопрос: при использовании плагина скрипты загружаются только на тех страницах, где используется код в статьях. В данном же случае скрипт подключается на всех без исключения страницах. Можно с этим что либо сделать?
Возможно и можно. У меня коды почти на всех страницах, поэтому я не заморачивался данным вопросом. Надо будет подумать над условием, если руки дойдут)
Наверно в плагине уже есть готовая функция, только найти бы ее)
Кстати, а почему бы не объединить в один файл скрипты 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».
Только сейчас заметил, что код HTML который вставляю таким способом не весь отражается, обрезаются символы < > и все что в них заключено.
Может в файл functions.php к тому коду нажно еще что-то добавить?
Сергей, попробуйте код предварительно обратить в HTML-сущность.
Да, так работает. Эх все-таки есть ограничения у этого метода подсветки) А вы тоже меняете везде символы на сущность?
Сергей, в статье я писал, что редактор WordPress сам переводит символы в их сущности, если вставлять код в визуальном режиме и заключать его в шорткод. Если же вставить код в режиме HTML, при этом не переводя его в сущности, то код будет выполнятся, а не отображаться. Просто вставляйте коды в визуальном режиме.
Не работает в комментариях! Как исправить?
Есть $content, может к нему добавить $comment какой-нибудь? Я не разбираюсь в этом, подскажите пожалуйста)
Дмитрий, я не делал шорт-код для зоны комментариев. В комментариях прекрасно работают классы:
Кстати, а почему использовать нужно папку syntaxhighlighter2, а не 3? Третья версия наверное поновее и получше?
Дмитрий, не думаю, что 3 часть отличается от второй, в плане улучшенной подсветки. Можете провести свой эксперимент и выяснить разницу. Когда я занимался внедрением подсветки в в свой шаблон syntaxhighlighter3 еще не было.
С первого раза ничего не вышло . Ладно, будем разбираться …
Оксана, сделайте всё как у Виталика и всё будет ОК
Здравствуйте, у вас хороший блог! Я предлагаю вам обмениваться комментариями для повышения ПФ.
все проделал в точности, но у меня код выводится просто на сером фоне. никаких иконок не видно, разлиновки по строкам нет. проверял все пути к картинкам и т.д., но бесполезно.
Василий, работа довольно не простая! Ищите, где-то ошибка, ведь у меня и на других сайтах все работает. Попробуйте файл стилей подключить отдельно.
странно конечно, но у меня даже сам плагин в оригинале не работает на блоге как надо. сношу.
Отличное решение, благодарю за проделанную работу, а то уж слишком много подгружает скриптов
Привет Виталий!
Как сделать функцию для комментариев? В комментариях тоже код и нужна подсветка.
Так не работает:
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('<','>', ''', '"'); $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]
Конечно, можно изменить на любой другой шорткод, лишь бы их название не повторялось.