Код, предварительно отформатированный и абзац Блоки Гутенберга в WordPress
Редактор блоков Gutenberg позволяет добавлять контент на ваши страницы и записи в WordPress. Существует множество различных типов блоков, которые вы можете использовать для создания и оформления вашего контента. Однако некоторые блоки имеют схожий характер, что пользователи путаются, где именно использовать соответствующий блок. В этой статье мы рассмотрим три наиболее распространенных типа блоков, доступных в редакторе блоков Gutenberg: блоки кода, предварительно отформатированного и абзаца. Мы объясним, чем они отличаются друг от друга, а также подходящие сценарии использования каждого из них.
Код против предварительно отформатированных блоков против блоков абзаца
Код, предварительно отформатированный и абзац являются частью текстовых блоков в редакторе Гутенберга. Вы можете использовать эти блоки для вставки различных типов текстового содержимого в зависимости от ситуации.
1. Кодовый блок
Как следует из названия, кодовый блок используется для прямого отображения отформатированного кода в учебных целях. Другими словами, всякий раз, когда вам нужно показать код как часть вашего контента, используется блок кода. Теперь вы можете подумать, будет ли кодовый блок запускать введенный код? И ответ — нет, он просто отобразит отформатированный код для просмотра вашими читателями. По сути, блок кода — это не редактор кода, он в основном показывает код в том виде, в котором он был добавлен. Поэтому обязательно применяйте передовые методы кодирования, такие как форматирование с использованием пробелов, добавление комментариев к коду и т. д.
Еще одна замечательная особенность блока кода заключается в том, что он отображает код любого языка программирования, поскольку не запускает его. Это делает его отличным инструментом для отображения различных типов сценариев, которые ваши читатели могут прочитать, изучить или даже скопировать.
Как и в случае с другими блоками Гутенберга, блок кода предоставляет два варианта настройки: верхняя панель инструментов, расположенная над блоком, и боковая панель блока, расположенная в правой части страницы, как показано на изображении выше.
С верхней панели инструментов вы можете выполнить следующие изменения в блоке.
Изменить стиль или тип блока: Этот параметр позволит вам изменить блок кода на предварительно отформатированный, пользовательский HTML, изменить столбцы или создать группу, стиль, цвет и интервалы которой можно дополнительно настроить.
Тяга: Это говорит само за себя, и вы можете удерживать этот значок, чтобы переместить блок, перетащив его в любое место на странице.
Двигаться вверх и вниз: Этот параметр работает так же, как и предыдущий, с той лишь разницей, что вместо перетаскивания блока вы можете вручную перемещать блок вверх или вниз по блоку.
Параметры шрифта: Верхняя панель инструментов также предоставляет параметры для применения жирного шрифта и курсива к написанному коду.
Ссылка на сайт: Этот параметр позволяет сделать гиперссылку любого написанного кода на определенный URL-адрес.
Больше настроек: Этот параметр позволит вам использовать такие параметры, как встроенный код, встроенное изображение, ввод с клавиатуры, зачеркивание, нижний индекс, верхний индекс и цвет текста.
Другая панель настройки, представленная в блоке кода, — это боковая панель, которая позволит вам изменить размер шрифта, а также включить привязку HTML и дополнительные классы CSS.
2. Предварительно отформатированный блок
Этот блок очень похож на кодовый блок с некоторыми небольшими отличиями между ними. Этот блок отображает текст точно так, как он был введен, и в основном используется для отображения текстового содержимого с разрывами строк и пробелами, предоставляя возможность изменить типографику, цвета и многое другое.
Давайте рассмотрим настройки верхней панели инструментов и боковой панели этого блока, чтобы мы могли выявить некоторые важные различия между этим блоком и блоком кода.
На верхней панели инструментов большинство опций такие же, как и на блоке кода. Вы также можете преобразовать предварительно отформатированный блок в код и другие блоки, как описано выше. Основное различие между предварительно отформатированным блоком и блоком кода заключается в параметрах боковой панели блока и, в частности, в параметрах цвета. Предварительно отформатированный блок позволяет вам изменить цвет текста, добавить цвет фона, а также изменить цвет ссылки, если есть какие-либо тексты, на которые есть гиперссылки. В то время как блок кода предоставляет возможность изменить цвет текста на вкладке «Дополнительные параметры» на верхней панели инструментов, дополнительные параметры настройки цвета, представленные в предварительно отформатированных блоках, выделяют его.
Примечание: Существует множество плагинов для подсветки синтаксиса, которые позволяют продемонстрировать ваш код, добавляя цвета, номера строк и функции копирования. Большинство этих плагинов работают с тегом
или предварительно отформатированным тегом, который включает тег . Например, плагин добавит подсветку синтаксиса при добавлении кода в формате
ваш код
. Однако некоторые плагины также могут использовать только предварительно отформатированные или кодовые блоки. Если вы разработчик или кодер и хотите продемонстрировать свои навыки кодирования, мы рекомендуем использовать один из этих плагинов подсветки синтаксиса, чтобы использовать код по умолчанию и предварительно отформатированные блоки в Gutenberg.
3. Блок абзаца
И, наконец, у нас есть блок абзаца, который является типом блока по умолчанию для добавления содержимого и текста через редактор блоков. Это блок, который вы наверняка будете использовать чаще всего, поскольку этот блок является самым основным и основополагающим блоком. Введенный текст будет отформатирован с помощью тегов абзаца HTML, и нажатие клавиши ввода создаст новый блок абзаца.
Другие ключевые различия между блоком абзаца и двумя другими заключаются в его уникальных параметрах настройки. С помощью верхней панели инструментов, в отличие от двух других блоков, блок абзаца можно преобразовать в столбцы, группы, предварительно отформатированный блок, заголовок, список, цитаты, цитату и стих. Остальные параметры верхней панели инструментов одинаковы между тремя блоками. Кроме того, глядя на параметры боковой панели блока, он предоставляет параметры цвета текста и фона, такие как предварительно отформатированный блок, но также имеет уникальную опцию под названием «Настройки текста». Этот параметр позволяет отображать буквицу (большую начальную букву) в абзаце, как показано в примере ниже.
Кроме того, у вас есть возможность добавить буквицу и изменить высоту строки. Однако разница здесь в том, что вы можете преобразовать абзац в предварительно отформатированный, но не в блок кода.
Различия — код против предварительно отформатированного против абзаца
Вот краткое изложение различий между этими блоками.
Использование/блокировка
Параграф
Код
предварительно отформатировано
Цель
Блок абзаца используется для создания содержимого и является блоком по умолчанию для добавления текста через редактор блоков.
Блок кода используется для отображения кода как части содержимого.
Предварительно отформатированный блок используется для отображения текста именно так, как вы его вводите.
HTML-тег
……
……код>
……пре>
Преобразование
Для предварительно отформатированных и многих других
Для предварительно отформатированного
Кодировать
Цвет текста
Да
Да
Да
Фон
Да
Нет по умолчанию, вы можете использовать группу для добавления фона
Да
Используется в подсветке синтаксиса
Нет
Да
Да
Используемый шрифт
Основной шрифт по умолчанию
Пользовательский моноширинный шрифт
Пользовательский моноширинный шрифт
Разрыв строки
Нет
Да
Да
Пространство
Да
Да
Да
HTML-комментарии
Нет
Да
Да
Вкладка
Нет
Да
Да
Буквица
Да
Нет
Нет
Высота линии
Да
Нет
Нет
Заключительные слова
И вот оно. Все три блока служат своей цели с точки зрения добавления определенных типов контента через редактор блоков. Стили этих блоков зависят от используемой вами темы, и большинство тем и плагинов используют комбинацию pre/code для подсветки синтаксиса. Кроме того, вы можете использовать пользовательский блок HTML, чтобы вставить результат кода.
