Пропустить

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

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

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

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

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

Синтаксис Highlighter Evolved

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

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

Настройки SyntaxHighlighter

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

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

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

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

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

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

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

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

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

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

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

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

или или или и ... ну, вы получаете </ li> <li> </ Li> </ UL>

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

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

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

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

Более того, блок SyntaxHighlighter Evolved сам по себе. Установка плагина включает в себя собственный блок Gutenberg; поэтому, если вы не шорткод и не хотите играть с настройками, вам не нужно. Просто найдите блок под форматирование и вставьте его в ваше сообщение или страницу.

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

Подводя итог

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

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

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

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

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

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

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