Prettify For WordPress — плагин подсветки синтаксиса кода в WordPress

Prettify For WordPress — плагин подсветки синтаксиса кода в WordPress

Prettify For WordPress — плагин подсветки синтаксиса кода в WordPress
5 (100%) 1 vote

Плагинов для подсветки синтаксиса кода для WordPress существует немало. Очень часто вы можете встретить их на том или ином блоге, где в записях приходится использовать какую-то часть кода для отображения ее пользователям. Я тоже использую специализированный плагин для подсветки синтаксиса кода на своем блоге. Наиболее популярные из них-это SyntaxHighlighter Evolved, WP SyntaxHighlighter, Auto SyntaxHighlighter и многие другие им подобные с различными вариациями, стилями и способами отображения. Лично меня они полностью устраивают, прекрасно работают и легко встраиваются на страницу или в запись. Также, в настройках некоторых плагинов имеется возможность менять цветовой стиль блока для лучшей адаптации его к внешнему стилю блога или сайта.

Однажды, разрабатывая свой очередной проект, я использовал в нем один из вышеуказанных плагинов для подсветки синтаксиса кода, задал в настройках цветовую схему для блока с кодом под цветовой стиль блога. Все бы, вроде, хорошо, но как-то уж внешне он не очень дружелюбно смотрелся на фоне дизайна блога и это подтолкнуло меня отправиться на поиски нового решения для подсветки синтаксиса кода. Поиски привели меня на зарубежный  блог, посвященный трюкам CSS. Блок с  подсветкой синтаксиса кода на этом блоге сразу же меня заинтересовал, тем более для меня это было что-то новое в плане работы с кодом в записях и на страницах WordPress.

Prettify For WordPress - плагин подсветки синтаксиса кода в WordPress

Прочитав исходник кода, я понял, что на блоге используется скрипт подсветки синтаксиса кода от Google, который я нашел здесь, там же я нашел инструкцию по установке скрипта, а также все исходные файлы для него. Зная свою лень, иногда, копаться в коде руками и что-то кропотливо устанавливать и настраивать, я начал искать плагин, который бы использовал этот скрипт в своей работе. Этим плагином оказался Prettify For WordPress, который можно скачать с официального репозитория официального сайта WordPress. Ознакомившись с документацией, можно узнать, что для настройки внешнего вида блока подсветки синтаксиса кода также требуется установка плагина ThemeKit For WordPress, который является плагином настройки не только для Prettify For WordPress, но и для некоторых других плагинов.

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

Prettify For WordPress - плагин подсветки синтаксиса кода в WordPress

Prettify For WordPress - плагин подсветки синтаксиса кода в WordPress

Prettify For WordPress - плагин подсветки синтаксиса кода в WordPress

Prettify For WordPress - плагин подсветки синтаксиса кода в WordPress

Как видите, плагин имеет достаточное большое количество всевозможных настроек, которые можно использовать для максимально близкого придания цветового стиля в рамках вашего сайта или блога. На этой же странице приведен пример для вставки кода на страницах и в записях, который необходимо использовать только на вкладке HTML редактора в вашей административной части WordPress:

<pre rel='HTML' class='prettyprint'>
<code> { Здесь ваш код } </code>
</pre>

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

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

Prettify For WordPress - плагин подсветки синтаксиса кода в WordPress

Для более тонкой настройки блока на странице с настройками есть специальное поле Settings & Generated Styles, в котором вы можете, с помощью классов CSS задать отступы, позиционирование элементов внутри блока и т.д. Правда, у меня почему-то внешний вид блок никак не реагировал на изменение стилей в этом поле. Но все равно, согласитесь, и без них получился приятный на вид блок с подсветкой синтаксиса кода.

Поскольку, я задался целью сделать блок подсветки синтаксиса кода похожим как на блоге CSS-трюков, то мною было принято радикальное решение, с помощью которого я добился желаемого результата. Возможно, это решение пригодится также кому-то из вас. Суть такова: поскольку поле Settings & Generated Styles никак не реагировало на мои изменения в стилях CSS, то мне пришлось отключить плагин настройки ThemeKit For WordPress и редактировать файл стилей плагина Prettify For WordPress вручную. И в результате этого, я получил именно такой блок, к которому стремился:

Prettify For WordPress - плагин подсветки синтаксиса кода в WordPress

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

Prettify For WordPress — плагин подсветки синтаксиса кода в WordPress: 1 комментарий

  1. Ух ты спасибо большое 🙂 Искал подобные плагины, мне этот понравился, использовал плагины SyntaxHighlighter и другие, они мне не очень понравились 🙂

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

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