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

Как сделать подсветку кода (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 в статье

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

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

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

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

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

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

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

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

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

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

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

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

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

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