Вставить код в обычный текстовый виджет, и он лишает форматирование, оставляя нечитаемый блок. The Виджет исходного кодаВиджет Pro Мастер-аддоны для Elementor, исправляет это: он показывает ваш код с правильной подсветкой синтаксиса, номерами строк, языковой темой и кнопкой копирования, чтобы читатели могли захватить фрагмент одним щелчком мыши.
Он создан для учебных пособий, документации и блогов разработчиков, где угодно, где вам нужно чисто показать PHP, JavaScript, CSS, HTML или другой язык. вы вставляете код, выбираете язык и тему и устанавливаете кнопку копирования, все из панели Элементор. Ниже показан запуск через каждую настройку.
Что делает виджет Исходный код #
Виджет берет блок кода и визуализирует его с подсветкой синтаксиса с цветовой кодировкой на основе выбранного языка. Он может нумеровать строки, применить одну из нескольких тем редактора и добавить кнопку копирования в буфер обмена, которая подтверждает, когда код был скопирован.
Он имеет три вкладки: "Содержимое кода", "Язык" и "Кнопка копирования", "Стиль для контейнера" и "Стиль для образа кнопок" и "Дополнительно" для обычных опций Elementor.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер Аддоны Про установлен с активной лицензией, так как Исходный код является виджетом Pro. Новое в плагине? См руководство установки.
- Сниппет кода, который вы хотите отобразить.
Как добавить виджет Исходный код #
В редакторе Elementor откройте Элементы панель и поиск Исходный код, или прокрутите в раздел Главные дополнения. перетащите его на свою страницу. он загружается с образцом фрагмента, чтобы вы могли сразу увидеть выделение.
Добавьте свой код и выберите язык #
Открыть Содержание вкладка. Исходный код раздел держит все Вставить свой фрагмент в Исходный код поле, затем установите над ним язык и тему.
- Код: язык, который нужно выделить, один из 75, таких как PHP, JavaScript, CSS или HTML. Это устанавливает способ применения цветов.
- Тема: цветовая гамма блока (описана ниже).
- Исходный код: сам фрагмент с опцией "Записать с помощью искусственного интеллекта", если вам нужен краткий пример.
Выберите тему #
The Тема раскрывающийся список устанавливает цветовую схему блока кода. Он включает в себя параметр по умолчанию, Dark, Funky, Okaidia, Twilight, Coy, Solarized Light, Tomorrow и параметр "Настраиваемый", поэтому вы можете сопоставить блок со светлой или темной страницей.
Совместное переключение языка и темы придает каждому фрагменту правильный вид. Вот фрагмент JavaScript на тему Dark.
Настройте кнопку копирования #
Кнопка копирования - это то, что делает виджет полезным для обучающих программ. ниже кодового поля находятся элементы управления для него.
- Включить кнопку копирования: показать или скрыть кнопку копирования в буфер обмена.
- Включить номер строки: включите или выключите номера строк слева.
- Видимость кнопки: показывать кнопку Всегда или только на наведении.
- Положение кнопки: поместите его в угол, как верхний правый.
- Копировать текст кнопки и после скопировать текст кнопки: метка до и после копии, например "Копировать код" и "Копировать".
Когда посетитель нажимает кнопку, метка переключается на текст после копирования, чтобы подтвердить, что копия сработала.
Стиль кодового блока #
The Стиль вкладка разделена на Контейнер и Кнопка, плюс Шаблоны когда свободная Шаблоны расширение включено. The Контейнер секция управляет рамкой кодового блока.
- Высота: закройте высоту блока и позвольте длинному коду прокручиваться.
- Набивка и маржа: расстояние внутри и вокруг блока.
- Тип границы и радиус границы: контур и закругленные углы.
- Только пользовательская тема: фон, типографика, цвет текста, и цвет номера строки. на заказ показывает код в одном цвете, без выделения ключевых слов.
The Кнопка раздел стилизует кнопку копирования: его типографику, цвет текста, цвет фона, заполнение, границу и радиус. Отдельных цветов наведения нет.
Результат на странице #
Опубликовать или предварительный просмотр и код отображает выделенные, с номерами строк и рабочей кнопкой копирования Ниже представлен фрагмент CSS на тему Dark с кнопкой, показывающей его Скопированное состояние.
Обычные случаи использования #
- Учебники и практические сообщения совместное использование считывателей кода может копировать.
- Плагин и тематическая документация с примерами конфигурации или крючка.
- Блоги разработчиков отображение фрагментов в PHP, JavaScript или CSS.
- Базы знаний с командами копирования-вставки.
- Лендинги демонстрация кода вызова или внедрения API.
Советы по работе с виджетом Исходный код #
- Сопоставьте язык с кодом. Правильная настройка кода делает выделение точным.
- Выберите тему, подходящую для страницы. Используйте темную тему на темных разделах и светлую на белых страницах.
- Держите кнопку копирования видимой. Установите кнопку "Видимость всегда" для учебных пособий, чтобы читатели это заметили.
- Закройте высоту длинными фрагментами. Фиксированная высота со свитком удерживает длинный блок от захвата страницы.
- Напишите четкие метки кнопок. Копировать код и скопировать расскажите читателям, что именно произошло.
Часто задаваемые вопросы #
Что такое виджет исходного кода в главных аддонах?
Это виджет Master Addons Pro для Elementor, который отображает код с подсветкой синтаксиса, номера строк, тему языка и кнопку копирования в буфер обмена. вы вставляете фрагмент, выбираете язык и тему и устанавливаете кнопку копирования, все из панели Elementor, без необходимости плагинов или коротких кодов.
Какие языки программирования он выделяет?
Вы выбираете один из 75 языков в раскрывающемся списке "Код", включая PHP, JavaScript, CSS, HTML, Python, SQL и YAML. Выбор устанавливает способ применения цветов синтаксиса, поэтому фрагмент читается так, как это было бы в редакторе кода.
Могут ли читатели скопировать код одним щелчком мыши?
Да. включите кнопку Включить копирование и на блоке появится кнопка копирование в буфер обмена Вы устанавливаете его положение, когда он отображается, и текст до и после копии, например Копировать код и Копировать, что подтверждает клик работал.
Могу ли я показать номера строк в блоке кода?
Да. переключатель "Включить номер строки" на вкладке "Содержимое" добавляет числа в левой части блока. Они позволяют легко ссылаться на определенную строку в руководстве, и вы можете отключить их для более чистого образа.
Могу ли я изменить цветовую тему кода?
Да. раскрывающаяся тема предлагает по умолчанию, Темный, Funky, Okaidia, Сумерки, Coy, Соляризованный свет, Завтра, и Пользовательский. Выберите один, чтобы соответствовать светлой или темной странице, или используйте Пользовательские для установки вашего собственного фона и цвета текста во вкладке Стиль. Пользовательские показывает код в одном цвете, без выделения ключевых слов.
Завершая #
Виджет Исходный код превращает необработанный фрагмент в чистый выделенный блок, который читатели могут скопировать в один клик Вставьте код, установите язык и тему, включите номера строк и кнопку копирования, а затем создайте стиль контейнера, соответствующий вашей странице. для сравнения с виджетом Elementor Pro Code Highlight см Виджет блока кода Элементора страница. Другой способ представления структурированного контента см. в разделе Виджет динамической таблицы, просмотр всего Виджеты и расширения Master Addgetsи проверьте страница ценообразования за то, что включает каждый план.
