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

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

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

Плагин Crayon Syntax Highlighter

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если Вам понравилась статья — поделитесь с друзьями
Михаил Петров
Привет! Меня зовут Михаил Петров. Я копирайтер и занимаюсь этим с 2013 года. Скрупулезность и ответственность - моя фишка! Не могу делать как попало и добиваюсь, чтоб заказчик сказал минимум “неплохо”. За все время своей работы пришлось написать и отредактировать немало разной “текстовухи”, включая SEO-тексты, отзывы и прочую чушь. На сегодняшний день специализируюсь на написании информационных статей и руководств технического направления. Вижу смысл и светлое будущее в текстах для людей, а не для машин.
Обсуждение: 1
  1. Павел

    Спасибо за инструкцию. Предложенный плагин «Crayon Syntax Highlighter» давно не обновлялся, его использование может быть небезопасно. Могу в дополнение дать подробные рекомендации по установке собственной подсветки кода на базе библиотеки Prism JS:

    https://onstartup.ru/articles/wordpress/podsvetka-koda-na-sajte-wordpress/

Задать вопрос