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

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

Каждый блогер, пишущий на темы 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. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 код, который надо отобразить 
Автор DiviLancer

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

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

Оставьте ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *