Как реализуется подсветка кода (PHP, HTML,…) в статьях WordPress 3.5.1

Красивое выделение и подсветка кода в статьях блога на WordPress зачастую реализовывается при помощи установки дополнительных плагинов.

И чтобы разместить кусочек программного кода в своей статье я начал искать удобный и функциональный плагин. Перепробовал их наверное штук 5, но ничего из этого не вышло, так как рекомендуемые в интернете блогерами наиболее популярные плагины отказывались работать с версией WordPress 3.5.1, даже самый простой и нетребовательный WP-Syntax.

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

Пример использования плагина смотрите в этой статье. Этот плагин называется «Crayon Syntax Highlighter», установкой и тестированием которого мы и займёмся дальше.

Подсветка кода

Для установки плагина переходим в админпанель своего блога на вкладку «Плагины» и кликаем на кнопку «Добавить новый».

Админпанель блога для добавления плагинов
Вкладка «Плагины»

В поле поиска вводим слово «syntax» и нажимаем «Найти плагины».

Поиск плагина по ключевому слову
Поиск плагина

В найденных плагинах ищем плагин под названием «Crayon Syntax Highlighter» и нажимаем ссылку «Установить сейчас».

Установить найденный плагин
Установка

Во всплывающем окне жмём на кнопку «ОК».

Соглашение пользователя на установку плагина
Окно с кнопкой «ОК»

После загрузки и распаковки плагина, кликаем на ссылку «Активировать плагин».

Активация плагина после загрузки
Ссылка для активации

В установленных плагинах видим нужный нам активированный плагин.

Список установленных плагинов с готовым решением
Все готово

Расширенные настройки плагина можно найти в меню «Настройки» админпанели блога в подменю «Crayon».

Настройки "Crayon" в админпанели блога
Пункт меню «Crayon»

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

Настройки плагина Crayon Syntax Highlighter на нужном языке
Настройки плагина

Для того, чтобы воспользоваться плагином, нужно в статье отобразить её HTML-код нажатием на вкладку «Текст», где в нужном месте статьи поставить курсор и нажать кнопку «crayon».

Включаем отображение кода HTML в статье по нажатию на кнопку
Кнопка на панели

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

Добавление кода в статью блога с расширенными настройками
Выбор параметров отображения кода

Добавленный код вставится в статью, обрамлённый тэгами.

Теги для отображения кода в статье блога в удобном виде
Теги

Сохранив свою статью мы увидим вот такое прекрасное оформление кода.

Подсветка кода в опубликованном посте на блоге
Подсветка синтаксиса

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

Расширенное управление панелью отображения кода в статье
Расширенное управление блоком

4 комментария к “Как реализуется подсветка кода (PHP, HTML,…) в статьях WordPress 3.5.1”

  1. Плагинов для подсветки кода множество, все они выполняют одну функцию — улучшают читабельность текста, подсвечивая его форматирование в зависимости от синтаксиса. Однако далеко не все плагины выделяют программный код в редакторе постов, ограничиваясь только подсветкой в уже опубликованных постах. Плагин WordPress Rainbow Hilite умеет как подсвечивать синтаксис, так и выделять программный код в редакторе.

  2. Плагин отличный до обновления пользовался им, как обновился до версии 2,4,0 глюк полный, с версией вордпресс 3,4,2

    • Вчера обновил WordPress до версии 3.6. и плагин работает нормально.

  3. Ты никому не делаешь зла — это единственное, с чем надо считаться.

Оставьте комментарий