Если вы предлагаете какое-либо программное обеспечение или совет по программированию, вы обязательно захотите поделиться некоторыми фрагментами кода. Такой способ обмена фрагментами кода может помочь им быстро настроить практику. Однако по умолчанию совместное использование кода со всем необходимым форматированием невозможно. Под форматированием я подразумеваю подсветку синтаксиса. Тем не менее, это довольно легко сделать.
К счастью, если вы используете divi, вы должны знать, что существует встроенный способ сделать это вручную и добавить собственные стили к этим фрагментам кода. Кроме того, существуют плагины и Ressources сторонние приложения, которые действительно могут упростить процесс создания красивых и функциональных сниппетов в Divi.
В этом руководстве я покажу вам, как делиться фрагментами кода в Divi (вручную). И я также покажу вам, как создавать блоки сниппетов с помощью Divi Builder, что выведет вас на следующий уровень.
обследование
Вот обзор возможных дизайнов сниппетов в этом руководстве.
В поля фрагментов кода с фрагментами кода добавлен ручной режим.
Предварительные условия для учебника
Для этого урока все, что вам нужно, это Диви тема, установлен и активен. Мы создадим примеры фрагментов кода с нуля, используя Divi Builder на новой странице.
Для начала создайте новую страницу и разверните Divi Builder в общедоступном интерфейсе. Затем выберите вариант «Строить с нуля».
Теперь вы готовы к работе!
Дизайн персонализированной коробки для фрагментов кода на Divi
Поскольку наш фрагмент кода находится в текстовом модуле, мы можем использовать конструктор divi для добавления элементов дизайна в текстовый модуль (и вокруг него). Для этого дизайна мы будем использовать модуль сводки, который будет служить меткой для фрагмента. Затем мы стилизуем и размещаем курсор слева от текстового модуля. Затем мы стилизуем текстовый модуль нашего сниппета.
Создание раздела, строки и столбца
Сначала необходимо создать новый раздел со строкой столбца.
Затем обновите параметры линии следующим образом:
Ширина желоба: 1
Пользовательские отступы: 0px вверху, 0px внизу
Добавить текстовый модуль
Затем добавьте текстовый модуль в строку.
Вы можете оставить содержание по умолчанию. Позже мы добавим в него фрагменты кода WordPress. А пока давайте смоделируем текстовый модуль, обновив следующие текстовые параметры:
Цвет фона: # eff0f1 Цвет текста: # 000000 Пользовательские поля: 60 пикселей слева Пользовательские отступы: 3% сверху, 3% снизу, 3% слева, 3% справа
Ширина верхней границы: 10 пикселей Цвет верхней границы: # 7cda24
Создание метки сниппета
Чтобы создать метку сниппета, мы будем использовать модуль рекламного сообщения. Это позволит вам добавить значок рекламного текста (или значок пользовательского изображения) рядом с отображаемым языком кода.
Создайте модуль презентации и перетащите его над текстовым модулем. Затем обновите следующие настройки презентации:
Заголовок: css Содержимое: [удалить фиктивное содержимое] Использовать значок: ДА Значок: см. Снимок экрана
Затем обновите параметры проекта следующим образом:
Цвет фона: # 1b2426 Цвет значка: # 7cda24 Расположение изображения / значка: слева Размер шрифта: 20 пикселей Цвет заголовка текста: #ffffff Размер текста Заголовок: 16 пикселей
Высота строки заголовка: 1.3em Ширина: 100 пикселей Пользовательское поле: -44 пикселей внизу, -50 пикселей слева Пользовательское заполнение: 10 пикселей вверху, 2 пикселя внизу, 15 пикселей слева, 15 пикселей справа
Дублируйте раздел, чтобы создать больше дизайнов блоков сниппетов
Это поддерживает наш первый дизайн блока кода. Теперь нам просто нужно продублировать раздел, содержащий дизайн блока кода, и обновить метку и цвета, чтобы создать новый блок кода для другого языка кодирования. Это, конечно, необязательно, но если вы планируете добавлять на страницу разные сниппеты, полезно иметь для каждого разную цветовую схему.
Например, дублируйте раздел и откройте настройки модуля Blurb.
Обновите заголовок "JS" для Javascript.
Затем щелкните правой кнопкой мыши «Цвет изображения / значка» и выберите «Найти и заменить».
Обновлены параметры поиска и замены:
In: этот раздел Заменить на: [новый цвет] Заменить все: проверить заменить все найденные значения
Теперь у вас есть новый блок фрагментов для фрагментов JS.
Вот пример блоков сниппетов для популярных типов кода для WordPress.
Использование плагина Prettify Code для добавления подсветки синтаксиса к фрагментам кода вручную
Ну, это правда, что с помощью ручного метода, вы можете сразу вставить текст и передать. Плагин Prettify Code мгновенно добавит выделенный код ко всем «предварительным» тегам. Прелесть этого плагина в том, что не требуется никакой настройки. Все, что вам нужно сделать, это загрузить и активировать плагин.
Вот пример того, как будет выглядеть код с Active Prettify Code.
Код Prettify приходит от Google а также используется для стилизации всех этих замечательных фрагментов на stackoverflow.com.
Чтобы закончить
Просмотр фрагментов кода на Divi не должен быть трудным. Добавление фрагментов вручную с использованием тегов кода pre и Word, предоставляемых WordPress, подойдет для большинства фрагментов, отличных от HTML, но сначала вам нужно запустить фрагмент через кодировщик. html, чтобы быть уверенным. Кроме того, вы можете дополнительно настроить стиль текста фрагмента, используя настройки текстового модуля. И не забудьте Code Prettify, чтобы добавить выделение к вашим ручным фрагментам.
Для тех из вас, кто регулярно делится сниппетами, вероятно, лучше всего будет использовать плагин SyntaxHighlighter. В любом случае у вас всегда будет возможность добавить больше креативных дизайнов к вашим сниппетам с помощью Divi Builder.
Bonne шанс.