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

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

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

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

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

ПОДСВЕТКА КОДА

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


Оцените инструкцию:
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...


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

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

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.