Каждый блогер, пишущий на темы WordPress или автор технического контента должны отображать код html на странице блога. Это может быть головной болью, потому что не все темы поддерживают в своих редакторах такую возможность. Премиальная тема Divi является как раз исключением. Но об этом ниже.

 

Есть несколько способов отображения кода в тексте записи. Один из них — это использование сторонних плагинов. Конечно, они утяжеляют код самой записи и негативно влияют на скорость загрузки страницы. Но иного выхода нет.

Рассмотрим плагин SyntaxHighlighter Evolved, который служит именно для этой цели. Установка и активация плагина обычны, найти его можно на штатном репозитории WordPress.org. Единственно, надо удостовериться, что скачивается именно тот плагин, который необходимо. Автором SyntaxHighlighter Evolved является Alex Mills (Viper007Bond). Существует много плагинов с аналогичными именами и функциями, но я рекомендую именно его, как надежного помощника.
Плюс SyntaxHighlighter Evolved идет со специализированным блоком для редактора Гутенберг (при работе с Divi он тоже может пригодится, потому что Divi Builder работает теперь с Гутенбергом). Не говоря уже о многих параметрах, которые позволяют просто и быстро решить задачу  отображения кода в записи.

Плагин SyntaxHighlighter Evolved

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

После установки плагина в консоли в меню Настройки появляется новый объект SyntaxHighlighter.

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

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

Страница настроек для плагина относительно проста.

Практически все настройки касаются внешнего вида того, как код отображен на Вашем сайте.

Можно добавить классы CSS к встраиванию, скорректировать дополнение номера строки, выбрать цветные темы, использовать умные вкладки и переход на новую строку.

Настройка плагина
Настройка плагина SyntaxHidhlighter
  1. Версия Highlighter — выбираем 3
  2. Показывать номера строк — показывать
  3. Отступ вложенных строк — оставляем по умолчанию 4. 

Все остальные настройки оставляем по умолчанию.

Можно изменить цветовую гамму, если не нравится дефолтная тема.

Можно также почитать:  Как сделать резервную копию сайта на WP

Посмотреть что получится после «экспериментов» с цветовыми гаммами можно на этой же странице в окне Предпросмотр.

Настройка внешнего вида плагина SyntaxHidhlighter

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

Версия Highlighter, номера и отступ вложенных строк

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

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

Если пользователи, которые будут читать пост и копировать код для себя, то версия 3.x будет предпочтительнее. Однако, если пост больше для чтения и отображения на дисплее, то версия 2.x может лучше подойти.

Второе — номера строк.

Если код вставляется с какими-то учебными целями, то нумерация строк необходима.

Или если код большой, то и в этом случае без номеров не обойтись.

Номера строк в плагине SyntaxHighlighter Evolved
Без номеров строк в плагине SyntaxHighlighter Evolved

Однако, если есть короткие отрывки кода, то нет никакой потребности постоянно маркировать строки.

Удаление нумерации может очистить вид кода и сделать его более читабельным.

Особой разницы выводить код с номерами или без них нет, это дело каждого автора.

И затем существует размер вкладки. Значения по умолчанию опции равно 4, но можно изменить его на любое число. Никакого значения это не имеет.

Код и шорткоды

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

Эти шорткоды необходимы для выделения фрагментов кода. Обычным пользователям, скорее всего, это не пригодится.

Параметры шорткодов

Использование плагина в Divi

Использовать плагин в теме Divi можно в тех модулях, в которых вообще возможно использование шорткодов. Чаще всего используется модуль Текст. При этом возможно использовать как в визуальном редакторе Divi Builder или в классическом редакторе. Если использовать модуль Текст, то предпочтительнее использовать вкладку Текст, а не Визуальный.  Так удобнее контролировать символы форматирования, которые могут быть случайно внесены в текст при копировании из какого-то внешнего источника (например из редактора Word). А во вкладке Текст эти символы хорошо видны.

Можно также почитать:  Что такое атрибут alt для картинки

Для внесения кода, он оборачивается в конструкцию

[рhр] код, который необходимо отобразить [/рhр] или смотри рисунок справа.

Данным плагином можно выводить на экран не только коды, но и любую информацию, которую надо каким-то образом выделить.

Использование плагина SyntaxHighlighter Evolved в теме Divi

 Результат выполнения данного шорткода показана ниже:

 код, который необходимо отобразить 

Использование модуля Код в визуальном конструкторе Divi Builder

Если нужно отобразить код html на странице в теме Divi, то для этого предназначен модуль Код.

Находясь в строке конструктора Divi Builder добавляем новый модуль.

Элементы кода в записи | EAN1QN5

Из готовых модулей выбираем модуль Код.

Вставка модуля Код

В открывшемся окне вводим требуемый код. В рассматриваемом примере это будет 

Вставка модуля Код

Результат, так сказать налицо… то есть код на странице

 код, который надо отобразить 
Элементы кода в записи | foto avtora 1

Автор блога — DiviLancer Леонид

Занимаюсь созданием блогов, интернет-магазинов, лендингов и корпоративных сайтов на премиальной теме WordPress Divi. Работаю на фрилансе, как самозанятый, по техническому заданию и договору. Обучу администрированию сайта. Окажу техническую поддержку. Гарантия на все работы два года.

Обращайтесь, буду рад помочь Вашему бизнесу или хобби.