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

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

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

После всего этого, решил тестировать плагины сам, путём их установки и настройки.

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

Пример использования плагина смотрите в этой статье.

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

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

Админпанель блога

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

Поиск плагина

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

Установить плагин

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

Соглашение на установку плагина

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

Активация плагина

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

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

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

Настройки админпанели блога

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

Настройки плагина Crayon Syntax Highlighter

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

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

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

Добавление кода в статью блога

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

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

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

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

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

Управление панелью отображения кода в статье

Комментарии:

4 комментария

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

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

Leave a Reply

Ваш e-mail не будет опубликован.