Подсветка кода в статьях WordPress при помощи Google Code Prettify

Code Prettify подключеник к вордпресс

Сегодня в очередном уроке рассмотрим один из большинства примеров реализации подсветки кода в статьях WordPress. В этом варианте воспользуемся модулям от Google, который позволяет подсвечивать синтаксис кода с разными языками программирования. У него есть ряд своих особенностей, включая построение на JavaScript основе с библиотекой-агностик. Поэтому его можно легко установить на любой сайт. Но кто хочет пойти по пути меньшего сопротивления, то для этого есть специальные плагины вставки кода.

Модуль Google Code Prettify возможно интегрировать на сайт двумя способами: через тег подключения скрипта, то есть напрямую загружать, или скачать как отдельные файлы. По сути Code Prettify добавляет свои стили тегу pre или code с определенными классами, а также допускается формирование содержимого внутри этих тегов как нумерованным списком <OL>. Это в том случае, если нужно отображать нумерацию строк, а так каждый элемент будет просто обернут в тег <span>.

Преобразование содержимого тега PRE в HTML-сущность

Чаще всего используется тег pre в качестве обвертывания фрагментов кода. Он сохраняет пробелы, перенос строки и форматирует текст должным образом. Но имеется один недостаток, в WordPress’e вставленный HTML код будет интерпретироваться как реальный HTML. Поэтому нужно сделать правильную конвертацию кода, чтобы сохранять корректный HTML код.

Это первая деталь доработок, вторая заключается в автоматичном добавлении к тегам pre определенные классы. Такое применение по меньшей мере будет предусмотрительным решением, так как подсветка кода задается только тем тегам pre, у которых имеются определенные классы. А, значит, если этого не сделать, то вам придется вручную добавлять нужный класс всем уже имеющимся тегам pre в статьях. Вот поэтому проще сделать все в автоматическом режиме.

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

Скачать код

Теперь тегу pre автоматически присваивается класс prettyprint и класс linenums, что дает нумерацию строк (по желанию можно убрать).

Подключение Code Prettify к WordPress

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

Особенности:

  • Легкий вес, при загрузке не блокирует загрузку страницы
  • Готовые темы оформления внешнего вида (стили CSS)
  • Поддерживает весь синтаксис без необходимости указывать точный язык
  • Можно указывать точный язык программирования
  • Поддержка кроссбраузерность

Подключение через CDN (Сеть Доставки Контента)

Многие выбирают именно этот вариант подключения поскольку у него имеется ряд своих преимуществ: улучшает кэширование, уменьшает задержку и прочее. Открываем файл functions.php и добавляем такой код:

add_action( 'wp_enqueue_scripts', 'my_prettify', 1001);
function my_prettify() {
    wp_deregister_script( 'prettify');
    wp_deregister_style( 'prettify');
    wp_dequeue_script( 'prettify-load');
    if ( is_single() || is_page()){
        wp_enqueue_style( 'prettify', '//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.css', array(), null );
        wp_enqueue_script( 'prettify', '//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js', array(), null, true );
        wp_enqueue_script( 'prettify-load');
    }
}

Подключение стандартным путем

Этот способ всем известен, так как он чаще всего используется. Подключение происходит через тег script и link (скрипт, стили), обычно добавляются между тегами <head>..</head> в файле header.php или файл footer.php, перед закрывающим тегом </body>.

<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'></script>

Скачивание файлов и загрузка на свой сервер

Всего получилось три варианта, а не два как говорил выше. Ну ничего страшного, продолжаем… В принципе этот способ похож на предыдущий, за исключением загрузки файлов, которые будут идти с вашего сервера. Скачиваем архив Code Prettify (здесь), создаем папку с названием «prettify», из архива помещаем два файла «prettify.js, prettify.css» в раннее созданную папку и загружаем на свой сервер. Затем в файл footer.php подключаем эти два файла:

<script src="<?php bloginfo('template_directory'); ?>/prettify/prettify.js"></script>
<link rel="stylesheet" property='stylesheet' href="<?php bloginfo('template_directory'); ?>/prettify/prettify.css"/>

Есть одна важная деталь. Все эти подключения могут не сработать без обработчика для запуска функции prettyPrint (). Поэтому сразу после подключения вышеуказанных скриптов или в файл footer.php, добавьте такой фрагмент кода:

<script>
(function(jQuery){
  jQuery( document ).ready( function() {
    prettyPrint();        
  } );
}(jQuery))
</script>

Стили оформления синтаксиса

Вот мы и подошли к концу этой статьи. Осталась самая малость: стили оформления внешнего вида и корректное отображение нумерации строк, если в вашей теме это сразу не предусмотрено. Лучше всего стили загружать от своего сервера это даст возможность редактировать их, а скрипт подключать удаленно. Google предоставляет несколько своих вариантов оформления (смотреть здесь), а также есть другие источники (здесь).

Просто копируете стили и добавляйте их в свой основной файл стилей, или подключаете как отдельный файл. Также прописываем стили для нумерации строк и к тегу pre:

.precode ol {
    counter-reset: li;
    list-style: none outside none;
    list-style-type: none;
    list-style-image: none;
    list-style-position: outside;
}

.precode ol li:before {
    content: counter(li, decimal);
    counter-increment: li;
    display: inline-block;
    font-size: 12px;
    margin: 2.5px 10px 2.5px 0;
    text-align: center;
    vertical-align: middle;
    width: 19px;
}
pre.prettyprint {
        background:#F5F2F0;
        color: #999;
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
    font-size: 13px;
    line-height: 16px;
    margin: 10px auto;
    max-height: 500px;
        padding:10px;
    overflow: auto;
    text-align: left;
        white-space: pre;
        word-wrap:normal;        
        overflow:auto;
}

После всего выполненного достаточно обернуть фрагмент кода в тег <pre >…< /pre> и будет корректный синтаксис кода.

10 комментариев
  1. Здравствуйте, спасибо за статейку. В php еще не сильно секу. Подсветку добавил, а вот статей то уже много, нужно автоматически добавить ко всем уже имеющимся тегам pre классы. Воспользуюсь вашей функцией. Сейчас спасибо скажу, тапну по рекламке.

  2. Спасибо, оценил,

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

  3. Подскажите, что за плагин подсветки кода, стоит у Вас. Это же не Google Code Prettify

  4. Скопировать сделайте с помощью clipboard.js А прокрутка...просто высоту блока укажите с overflow

Оставить ответ

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