Как в WordPress красиво подсветить вставки кода?

На всех сайтах, где обсуждаются вопросы программирования на том или ином языке, присутствуют вставки частей готового кода. Это могут быть блоги, форумы, сайты вопросов/ответов и пр. Довольно удобно смотреть на представленный код, когда все его директивы и части языка выделяются цветом, что позволяет легче его воспринимать. WordPress, по умолчанию, не поддерживает какую-либо подсветку кода. Код выводится довольно единообразно.

Запись на сайте

Плагин Crayon Syntax Highlighter

Бесплатный плагин Crayon Syntax Highlighter обеспечивает большой набор возможностей подсветки кода, среди которых:

  • поддержка многих языков программирования;
  • настройка языков;
  • выбор готовых тем и настройка каждого их элемента;
  • удобный вывод кода на сайте (кнопки копирования в буфер обмена, нумерации строк, открытия в новом окне).

После установки и активации плагин готов к работе. В принципе набор предустановленных и задействованных по умолчанию параметров уже после активации дополнения позволяют приступать к работе. Так, добавим на сайт в какую-либо запись кусок кода. Для этого необходимо открыть ее на редактирование или создать новую (меню Записи).

Окно редактирования записи

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

Окно вставки кода в плагине Crayon Syntax Highlighter

Как можно заметить, в окне присутствует огромное количество всевозможных настроек. Для вставки нашего кода мы будем использовать лишь несколько из них. В поле Language можно выбрать язык программирования, на котором написан вставляемый код. Укажем, например, PHP. Далее, в текстовом блоке Code, нужно вставить сам код и нажать кнопку Add.

Окно вставки кода в плагине Crayon Syntax Highlighter

В итоге в редакторе наша запись будет выглядеть следующим образом:

Окно редактирования записи

Для сохранения всех данных нужно нажать кнопку Обновить, после чего переходить на сайт.

Запись на сайте

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

Запись на сайте

Курс WordPress-разработчик
Если Вам понравилась статья — поделитесь с друзьями
Михаил Петров