Пропустить

Как добавить фрагмент кода с помощью Gutenberg на WordPress

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

Почти каждому блогеру, создателю контента или разработчику технологий необходимо время от времени публиковать выделенные фрагменты в своем блоге. Это само по себе может быть головной болью. Однако также может потребоваться выделение одной или нескольких строк в этом фрагменте, и эта функция, к сожалению, не является частью большинства интеграций кода. К счастью, плагин SyntaxHighlighter Evolved существует. Мы покажем вам, как использовать его, чтобы код оставался максимально чистым и читаемым.

Синтаксис Highlighter Evolved

Подсветка синтаксиса

Установка и активация плагина проста. Вы можете найти его в хранилище плагинов WP.org. но убедитесь, что это хорошо сделано Алекс Миллс (Viper007Bond), потому что результатов действительно много. Однако мы знаем, что он надежен и актуален. Более того, у этого есть специализированный блок для редактора Гутенберга. Не говоря уже о ряде параметров, которые позволяют персонализировать ваш опыт, что делает его нашим выбором для этого типа задач.

Плагин для выделения синтаксиса для wordpress

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

Настройки SyntaxHighlighter

Страница настроек плагина относительно проста. Что нам нравится в этом плагине, так это то, что вы получаете большое количество настроек, касающихся способа отображения кода на вашем сайте. Вы можете добавить классы CSS к встраиванию, настроить заполнение номеров строк, выбрать цветовые темы, использовать интеллектуальные вкладки и разрывы строк, а также решить, следует ли загружать индивидуальную подсветку языка кодирования. по всему сайту.

Конфигурация Syntaxhighlighter

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

Версия плагина, номера строк и размеры вкладок

Во-первых, какую версию плагина вы загружаете. Хотя плагин остается в репозитории в актуальном состоянии, вы можете выбирать между версиями плагина 2.x и 3.x , в зависимости от того, как вы хотите отображать свой код. Оба они безопасны, однако каждый из них предлагает определенные функции, которых нет у другого (на момент написания).

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

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

Тогда вам нужно отображать или нет номера строк. Для больших фрагментов кода и руководств номера строк неоценимы. Однако, когда у вас есть короткие фрагменты, нет необходимости постоянно маркировать их как строки 1 и 2. Их удаление может значительно улучшить внешний вид кода.

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

Ваш код и шорткоды

Если вы прокрутите страницу вниз Параметры , вы увидите предварительный просмотр большого кода, а также большое количество параметров шорткода. Вы потратите время на их изучение, просто чтобы увидеть, на что способен весь плагин, чтобы продемонстрировать ваши фрагменты. Кроме того, здесь будут отражены любые изменения, внесенные вами в отображение кода в настройках выше. Поэтому не забудьте нажать «Сохранить» после изменения любого из параметров.

См. Изменения синтаксиса divi.

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

ou ou ou et...bien, vous obtenez</li><li></li></ul>

Или некоторые варианты. Если вы помните, вы уверены в том, что вы можете делать с этим плагином. Хотя вы можете использовать длинный идентификатор, плагин SyntaxHighlighter построен достаточно хорошо, чтобы упростить вашу работу.

Используйте короткие коды

Вы можете использовать их везде, где можно создать шорткод. В Divi или классическом редакторе вы можете использовать текстовый модуль или редактор TinyMCE и просто вставить код между сокращенными кодами. Из-за того, как работает вкладка "Визуализация", мы рекомендуем использовать Текст сохранить эти форматирования специальные символы.

Текстовый параметр Divi

Если вы являетесь пользователем Gutenberg / Block Editor, все очень просто. Вы также можете использовать для этого текстовый блок. Еще проще - настраиваемый блок HTML. Как указано выше, вставьте код в теги шорткода.

Блокировать html gutenberg divi

Еще лучше, блок SyntaxHighlighter Evolved сам по себе. В установку плагина входит собственный блок Гутенберга; так что, если вы не являетесь шорткодом и не хотите возиться с настройками, вам не нужно. Просто найди блок под форматирование и вставьте его в ваше сообщение или страницу.

Подсветка синтаксиса gutenberg

Независимо от того, как вы вставите код, вы увидите один и тот же рендеринг на внешнем интерфейсе вашего сайта WordPress.

Подводя итог

Вам может понадобиться представить фрагменты вашей аудитории по многим причинам. Может быть, вы пишете учебные пособия или публикуете решения общих проблем, которые аудитория может принять и использовать по своему усмотрению? Но иногда интеграция с GitHub просто не обеспечивает того опыта, который вы хотите для своих пользователей. Это когда вам нужен плагин, такой как SyntaxHighlighter Evolved. 

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

Эта статья содержит комментарии 0

Оставить комментарий

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

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
1 акции
доля1
чирикать
Регистрация