Янв
10

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

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

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

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

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

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

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

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

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

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

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

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

P.S. Если вы хотите поработать в крупной иностранном проекте в качестве веб-разработчика на PHP/HTML/CSS, вам может быть полезно узнать больше о киевской аутсорсинговой компании Softheme.

VN:F [1.9.16_1159]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.16_1159]
Rating: 0 (from 0 votes)

Понравилась статья? Поделитесь ею в социальных сервисах!

Подпишитесь на обновление блога!

Ваш e-mail:

Понравилась статья? Вы не хотите пропускать новые статьи, посвященные Wordpress? Тогда подпишитесь на RSS или на электронный ящик и получайте новые статьи мгновенно! Также можете следить за мной в Twitter.

Один комментарий к “Prettify For WordPress-плагин подсветки синтаксиса кода в WordPress”

  • Нет аватара
    allemiko 04.02.2013 в 15:25

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)

Оставить комментарий для allemiko

Вы можете использовать следующие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.

Блог про wordpress и все, что с ним связано – возможности системы, секреты и хаки, плагины, шаблоны, оптимизация, seo, безопасность и т.п. Проект для начинающих и продвинутых пользователей.

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога по E-mail:

E-mail:

Последние комментарии

Друзья проекта