Как вставить необработанные коды HTML, CSS и JavaScript в WordPress?

Во многих случаях вам может потребоваться продемонстрировать необработанные коды HTML, CSS или JavaScript внутри сообщений и страниц вашего сайта WordPress. Это необходимо, особенно когда вы запускаете учебный сайт или объясняете, как работает фрагмент кода. WordPress – это интеллектуальное программное обеспечение, которое преобразует большую часть форматирования в контент, читаемый браузером. К сожалению, это именно то, что вам не нужно для отображения сырого кода. В этой статье мы узнаем больше о визуальных и текстовых редакторах WordPress, а также о том, как вставлять необработанные коды в сообщения WordPress.

Использование визуального редактора WordPress

В WordPress есть два редактора – визуальный и текстовый. Визуальный редактор – это то, что вы обычно используете для создания контента, в то время как текстовый редактор используется для просмотра исходного кода. Давайте рассмотрим пример вставки необработанного кода изображения HTML для вставки изображения.

Необработанный HTML-код для вставки изображения выглядит следующим образом:

Давайте создадим тестовый пост и вставим приведенный выше код в «Визуальный» редактор. Опубликуйте сообщение, и вы увидите, что необработанный HTML-код будет выглядеть точно так, как есть.

Добавление исходного кода в визуальный редактор WordPress

Этого достаточно, чтобы продемонстрировать простые исходные коды из нескольких строк.

Использование текстового редактора WordPress

Теперь вставьте тот же код в редактор «Текст» и обновите сообщение. Когда вы переключаетесь на визуальный редактор, WordPress автоматически конвертирует код и показывает изображение вместо исходного кода.

Вставка кода в текстовый редактор WordPress

Вставка кода в текстовый редактор WordPress

Мы также использовали теги или

 для вставки кода в редактор «Текст».  Но результат тот же, что WordPress автоматически преобразует код в изображение.  По сути, вы не можете использовать «Текстовый» редактор для вставки сырых кодов в сообщение.

Вышеупомянутое тестирование показывает, что вы можете использовать только «Визуальный» редактор для отображения сырых кодов как есть. Содержимое, вставленное в «Визуальный» редактор, кодируется и, следовательно, читается в той же структуре. Например, символ «меньше» (<), введенный на вкладке «Визуальный», будет преобразован в escape-символ «& lt;» который можно увидеть на вкладке «Текст».

Недостатки отображения кода в визуальном редакторе

Есть несколько проблем с отображением необработанного кода в «Визуальном» редакторе, например, текстового содержимого.

  • Это выглядит очень просто, особенно когда у вас большой объем кода, он будет выглядеть перегруженным.
  • Никаких номеров строк, раскраски и форматирования.
  • Вы не можете вставлять короткие коды, как в квадратных скобках в визуальном редакторе.
  • Когда вы вставляете URL-адрес изображения, WordPress вставляет фактическое изображение. Поэтому каждый раз, когда вам нужно нажимать «Отменить», чтобы вернуть URL-адрес вместо изображения или видео.
  • Прямые двойные кавычки будут преобразованы в наклонные двойные кавычки, чтобы они воспринимались как текст.

Чтобы преодолеть эти проблемы, рекомендуется использовать плагин для демонстрации необработанного кода. Есть много плагинов, которые мы используем Crayon Syntax Highlighter благодаря простоте использования.

Использование Crayon Syntax Highlighter

После установки и активации плагина будет создано контекстное меню «Настройки> Мелок».

Глобальные настройки Crayon Syntax Highlighter

Глобальные настройки Crayon Syntax Highlighter

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

  • Установите тему по умолчанию, шрифт, высоту, ширину и поля.
  • Включите или отключите панель инструментов поверх исходного кода.
  • Выберите один из 65 доступных языков в качестве стиля языка по умолчанию.
  • Просмотреть все сообщения с подсветкой синтаксиса мелком.
  • Включите отладку и просмотрите файлы журнала.

Выделение блока исходного кода в публикации

Плагин добавит кнопку «Код» в редактор сообщений, как показано ниже.

Кнопка кода выделения синтаксиса

Кнопка кода выделения синтаксиса

Нажмите эту кнопку «Код», чтобы увидеть всплывающее окно «Добавить код».

Добавление кода в Crayon Syntax Highlighter

Добавление кода в Crayon Syntax Highlighter

Вставьте необработанный код и настройте параметры в соответствии с вашими потребностями. Настройки появятся из глобальных параметров, и вы можете перезаписать отдельные блоки кода. Блок необработанного кода будет выглядеть, как показано ниже, и вы можете использовать темную тему для согласования с темой вашего сайта.

Crayon Syntax Highlighter

Crayon Syntax Highlighter

Преимущества использования Syntax Highlighter

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

  • Crayon Syntax Highlighter имеет встроенный редактор тем для глобальных настроек.
  • Встроенный редактор для изменения отдельного параметра на каждом уровне блока кода.
  • На верхней панели инструментов есть много полезных опций, таких как переключение номеров строк, переключение простого кода, режим копирования и открытие кода в отдельном окне браузера.
  • Вы можете зафиксировать высоту блока кода и включить полосу прокрутки внутри фрейма. Это поможет отображать большой блок кода на меньшей высоте.
  • Мобильный отзывчивый.
  • Вставляйте HTML, CSS, JavaScripts, PHP и любые другие блоки кода, не мешая коду WordPress.

Похожие записи

Добавить комментарий

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