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

К счастью, если вы используете divi, вы должны знать, что существует встроенный способ сделать это вручную и добавить собственные стили к этим фрагментам кода. Кроме того, существуют плагины и Ressources сторонние приложения, которые действительно могут упростить процесс создания красивых и функциональных сниппетов в Divi.

В этом руководстве я покажу вам, как делиться фрагментами кода в Divi (вручную). И я также покажу вам, как создавать блоки сниппетов с помощью Divi Builder, что выведет вас на следующий уровень.

обследование

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

В поля фрагментов кода с фрагментами кода добавлен ручной режим.

Предварительный просмотр кода возможен с diviПредварительные условия для учебника

Для этого урока все, что вам нужно, это Диви тема, установлен и активен. Мы создадим примеры фрагментов кода с нуля, используя Divi Builder на новой странице.

Для начала создайте новую страницу и разверните Divi Builder в общедоступном интерфейсе. Затем выберите вариант «Строить с нуля».

Теперь вы готовы к работе!

Дизайн персонализированной коробки для фрагментов кода на Divi

Поскольку наш фрагмент кода находится в текстовом модуле, мы можем использовать конструктор divi для добавления элементов дизайна в текстовый модуль (и вокруг него). Для этого дизайна мы будем использовать модуль сводки, который будет служить меткой для фрагмента. Затем мы стилизуем и размещаем курсор слева от текстового модуля. Затем мы стилизуем текстовый модуль нашего сниппета.

Создание раздела, строки и столбца

Сначала необходимо создать новый раздел со строкой столбца.

Столбец имеет строку divi

Затем обновите параметры линии следующим образом:

Ширина желоба: 1
Пользовательские отступы: 0px вверху, 0px внизу

Изменить параметр строки diviДобавить текстовый модуль

Затем добавьте текстовый модуль в строку.

Текстовый модуль Divi 1Вы можете оставить содержание по умолчанию. Позже мы добавим в него фрагменты кода WordPress. А пока давайте смоделируем текстовый модуль, обновив следующие текстовые параметры:

Цвет фона: # eff0f1 Цвет текста: # 000000 Пользовательские поля: 60 пикселей слева Пользовательские отступы: 3% сверху, 3% снизу, 3% слева, 3% справа

Настройки параметров текстового модуля Divi

Ширина верхней границы: 10 пикселей Цвет верхней границы: # 7cda24

Настройки текста границыСоздание метки сниппета

Чтобы создать метку сниппета, мы будем использовать модуль рекламного сообщения. Это позволит вам добавить значок рекламного текста (или значок пользовательского изображения) рядом с отображаемым языком кода.

Создайте модуль презентации и перетащите его над текстовым модулем. Затем обновите следующие настройки презентации:

Заголовок: css Содержимое: [удалить фиктивное содержимое] Использовать значок: ДА Значок: см. Снимок экрана

Модифицированный текстовый модуль diviЗатем обновите параметры проекта следующим образом:

Цвет фона: # 1b2426 Цвет значка: # 7cda24 Расположение изображения / значка: слева Размер шрифта: 20 пикселей Цвет заголовка текста: #ffffff Размер текста Заголовок: 16 пикселей

Настройки модуля Blurb divi

Высота строки заголовка: 1.3em Ширина: 100 пикселей Пользовательское поле: -44 пикселей внизу, -50 пикселей слева Пользовательское заполнение: 10 пикселей вверху, 2 пикселя внизу, 15 пикселей слева, 15 пикселей справа

Настройка модуля css blurb

Дублируйте раздел, чтобы создать больше дизайнов блоков сниппетов

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

Например, дублируйте раздел и откройте настройки модуля Blurb.

Обновите заголовок "JS" для Javascript.

Затем щелкните правой кнопкой мыши «Цвет изображения / значка» и выберите «Найти и заменить».

Дублируйте раздел diviОбновлены параметры поиска и замены:

In: этот раздел Заменить на: [новый цвет] Заменить все: проверить заменить все найденные значения

Теперь у вас есть новый блок фрагментов для фрагментов JS.

Вот пример блоков сниппетов для популярных типов кода для WordPress.

Добавить фрагменты кода DiviИспользование плагина Prettify Code для добавления подсветки синтаксиса к фрагментам кода вручную

Ну, это правда, что с помощью ручного метода, вы можете сразу вставить текст и передать. Плагин Prettify Code мгновенно добавит выделенный код ко всем «предварительным» тегам. Прелесть этого плагина в том, что не требуется никакой настройки. Все, что вам нужно сделать, это загрузить и активировать плагин.

Вот пример того, как будет выглядеть код с Active Prettify Code.

Код prettfy в действииКод Prettify приходит от Google а также используется для стилизации всех этих замечательных фрагментов на stackoverflow.com.

Чтобы закончить

Просмотр фрагментов кода на Divi не должен быть трудным. Добавление фрагментов вручную с использованием тегов кода pre и Word, предоставляемых WordPress, подойдет для большинства фрагментов, отличных от HTML, но сначала вам нужно запустить фрагмент через кодировщик. html, чтобы быть уверенным. Кроме того, вы можете дополнительно настроить стиль текста фрагмента, используя настройки текстового модуля. И не забудьте Code Prettify, чтобы добавить выделение к вашим ручным фрагментам.

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

Bonne шанс.