Виджет блокировки кода Elementor с подсветкой синтаксиса (Pro)
Исходный код - это виджет Master Addons Pro для отображения фрагментов кода на странице Elementor.Вставьте код, выберите один из 75 языков и одну из восьми тем Prism.js, и блок отображает с синтаксическими цветами, дополнительными номерами строк и кнопкой копирования в буфер обмена. Посетители могут читать и копировать код, но не редактировать его. Он подходит для учебных пособий, документации, журналов изменений и портфолио разработчиков.
Как добавить блок кода в Elementor
Исходный код нуждается в Elementor и активном устройстве Мастер Аддоны Про лицензия.
- Активируйте Master Addons Pro, отредактируйте страницу с помощью Elementor и найдите панель виджетов Исходный код.
- Перетащите его туда, где находится фрагмент.
- Выберите язык Код и а Тема.
- Вставьте фрагмент в Исходный код коробка.
- Включите кнопку копирования и номера строк, а также установите текст кнопки, видимость и положение.
- На вкладке Стиль установите Высоту для длинных фрагментов и нанесите кнопку, затем просмотрите страницу и проверьте копирование.
Каждая обстановка описана в Настройки виджета исходного кода гид.
75 языков и 8 тем Prism.js
The Код в раскрывающемся списке перечислены 75 языков: от HTML, CSS, JavaScript и PHP до Python, Bash, SQL, JSON, YAML, TypeScript, React JSX, Go, Kotlin и Swift. Тема предлагает по умолчанию, Темный, Фанки, Окайдия, Сумерки, Кой, Соляризованный свет и Завтра. Выбирать Пользовательский чтобы установить свой фон, цвет текста, цвет номера строки и типографику на вкладке Стиль.
- Используйте светлую тему, такую как "По умолчанию" или "Соляризованный свет" на белых страницах и "Окайдия" или "Завтра" на темных разделах.
- Пользовательский не имеет цветов ключевых слов: код отображается в выбранном вами цвете одного текста, поэтому используйте заданную тему, когда вам нужны цвета синтаксиса.
- Один виджет содержит один фрагмент. Поместите несколько виджетов рядом для кода и вывода.
Основной момент кода Elementor Pro против исходного кода главных дополнений
У Elementor Pro есть свой виджет Code Highlight. оба используют Prism.js, поэтому выбор сводится к необходимым вам дополнениям.
| Особенность | Элементор Про Код Основной момент | Исходный код главных аддонов |
|---|---|---|
| Цена | Нужен Элементор Про | Нужны главные дополнения Pro |
| Языки | 37 | 75 |
| Темы | 6 (Твердый, Темный, Окайдия, Соляризованный свет, Завтра, Сумерки) | 8 плюс индивидуальные цвета |
| Кнопка копирования | Копировать на коммутатор буфера обмена | Пользовательский текст, скопированный текст, Всегда или На Ховере, две позиции, полный стиль |
| Номера строк | Да | Да |
| Выделить линии | Да | Нет |
| Словообертка | Да | Нет |
| Высота и размер шрифта | Да | Высота плюс типографика с темой Custom |
Выберите Elementor Pro, если вам нужно выделить определенные строки или обернуть длинные строки. выберите Главные дополнения, если вам нужно больше языков, больше тем или стилизованная кнопка копирования. Связанные: Оглавление для длинных уроков и Динамическая таблица для справочных таблиц.
Копировать кнопки и номера строк
Включать Включить кнопку копирования чтобы добавить кнопку, которая копирует весь фрагмент. Установите его Копировать текст кнопки, После скопированного текста кнопки показано после щелчка, Видимость кнопки (Всегда или На Ховере) и Положение кнопки (верхний правый или нижний правый угол). Включить номер строки добавляет цифры в левой части.
- Держите кнопку "Всегда" на страницах учебных пособий, чтобы читатели это заметили.
- Номера строк позволяют легко ссылаться на строку в тексте.
- Нет возможности выделить определенные линии или обернуть длинные линии внутри виджета.
Стиль контейнера и кнопок
The Контейнер раздел устанавливает высоту (до 1200px) так длинные фрагменты прокрутить, плюс заполнение, маржа, граница и радиус. с пользовательской темой он также добавляет фон, типографику, цвет текста и цвет номера строки.The Кнопка в разделе кнопка копирования отображается с помощью типографики, цвета текста, цвета фона, заполнения, границы и радиуса.
- Закройте высоту длинных файлов, чтобы страница оставалась читаемой.
- Сопоставьте фон кнопки с цветом вашего бренда.
- Добавьте заполнение, чтобы код не касался краев блока.
Часто задаваемые вопросы по исходному коду
Виджет Исходный код бесплатен?
№ Исходный код является частью Мастер Аддоны Про. Пользователи Elementor Pro также имеют виджет Elementor Code Highlight.
Могу ли я скрыть номера строк рядом с кодом?
Да. Набор Включить номер строки на Нет для чистящего блока.
Где я могу расположить кнопку копирования?
Набор Положение кнопки в правом верхнем или правом нижнем углу, и Видимость кнопки всегда или на зависании.
Какие языки поддерживает виджет Исходный код?
75, выбранный в раскрывающемся списке Код. Они включают HTML, CSS, JavaScript, PHP, Python, Bash, SQL, JSON, YAML, Markdown, TypeScript, React JSX и TSX, Go, Java, Kotlin, Swift, Ruby, C, C++ и C#. Посетители могут читать и копировать код, но не могут его редактировать.
Могу ли я использовать свою собственную цветовую схему вместо заранее заданных тем?
Частично. Установите тему на заказ, чтобы выбрать фон, цвет текста, цвет строки и типографику в разделе "Стиль контейнера". Цвета ключевых слов поставляются только с восемью предустановленными темами, поэтому пользовательский блок показывает код в одном цвете, если вы не добавите свой собственный CSS.
Могу ли я выделить конкретные строки?
Нет. у виджета нет опции выделения строки Виджет выделения кода Elementor Pro может выделить выбранные строки, если вам это нужно.
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
![Расширение Master Addons Post/Page Duplicator для Elementor: ссылка на строку MA Duplicator в списке WordPress Pages, создающая целевую страницу - [Дублированный № 128] черновик](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Дубликатор сообщений/страниц
