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

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

Плагин Crayon Syntax Highlighter

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

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

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

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

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

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

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

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

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