Обучение отображению кода в WordPress крайне важно для блоггеров и создателей контента, которые постоянно публикуют код в Интернете для использования своими читателями. Компьютерный код, по своей сути, отображает что-то новое на фронтенде сайта, а не теги, косые черты и скобки, которые вы находите в самих фрагментах кода. Это, однако, создает проблему для тех, кто пишет о разработке и дизайне, поскольку вам нужен способ правильно отобразить код без того, чтобы он выполнял свою настоящую работу, например, создавал кнопку или добавлял стиль в блок абзаца.
Проще говоря, если вы пишете статью в блоге и помещаете в нее пример фрагмента кода, вы захотите помешать коду работать! Таким образом, читатели смогут увидеть код в необработанном виде, просмотреть его в красиво отформатированном блоке и даже скопировать его содержимое для использования в своей работе. В этом руководстве мы покажем вам, как именно отображать код в WordPress (независимо от вашей темы WordPress), используя несколько различных методов, и поможем вам решить, какой метод лучше всего подходит для вашего рабочего процесса.
Что происходит, когда вы добавляете обычный код в WordPress?
Вам может быть интересно, что произойдет, если вы напишете какой-нибудь код в визуальном редакторе WordPress. В конце концов, вы же не работаете с текстовым редактором или редактором кода, так разве ваш фрагмент кода не должен работать нормально? Скорее всего, нет.
Вот некоторые необычные результаты, которые могут возникнуть:
- Код отображается частично, при этом некоторые части кода отображаются на фронтенде поста, а другие исчезают. Это выглядит непрофессионально для посетителей; это означает, что ваш код не точен.
- Код вообще не появляется, при этом он полностью исчезает из поля зрения на бэкенде и ничего не отображается на фронтенде вашего сообщения.
- Вы видите странное форматирование – часто то, что не является удобным для пользователя или публикации для аудитории.
- Код может отображаться только частично.
Чтобы проиллюстрировать пару таких результатов, мы используем следующий фрагмент HTML-кода:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: green;
color: white;
border: 4px solid black;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Chicago</h2>
<p>A nickname for Chicago is The City of Broad Shoulders.</p>
</div>
<div class="cities">
<h2>Los Angeles</h2>
<p>A nickname for Los Angeles is The City of Angels.</p>
</div>
<div class="cities">
<h2>New York</h2>
<p>A nickname for New York is The Big Apple.</p>
</div>
</body>
</html>Этот конкретный фрагмент кода использует элементы стилизации HTML для создания трех зеленых блоков содержимого с заголовками и абзацами.
Однако мы хотели бы отобразить необработанный код в записи блога, а не вводить его в эти блоки.
Вот результаты, если мы вставим код непосредственно в редактор блоков WordPress Gutenberg:
Как видите, WordPress пытается использовать код по его основному назначению: для генерации контента – но при этом он лишает код стилизации, поэтому он не дает того результата, который мы хотели показать читателям. Чтобы избежать подобных ситуаций, мы рекомендуем вам использовать для отображения кода один из перечисленных ниже методов.
Как отобразить код на вашем сайте WordPress (6 методов)
Эти методы перечислены от самого простого к самому сложному, и у нас есть несколько специальных методов для тех, кто любит писать код и контент в редакторах markdown (в отличие от WordPress).
Метод 1: Использование редактора блоков Gutenberg (по умолчанию)
Чтобы попрактиковаться в отображении кода в WordPress, вы можете использовать следующий фрагмент кода, который использует HTML и внутренний CSS для получения простого результата с одним синим заголовком и одним черным абзацем:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: beige;}
h1 {color: blue;}
p {color: black;}
</style>
</head>
<body>
<h1>Fun Facts About Otters</h1>
<p>A group of otters in water is called a "raft," since they all link arms to prevent from floating away.</p>
</body>
</html>Когда код введен в действие, он показывает следующее на фронтенде:
Но следуя этому руководству, вы узнаете, как отображать сам исходный код, а не то, что код должен показывать на фронтенде.
Шаг 1: Добавьте блок Code в WordPress
В редакторе WordPress Gutenberg уже есть встроенный блок Code, который позволяет отображать фрагменты кода без потери форматирования или фактической активации кода. Для начала откройте пост или страницу в WordPress, затем нажмите одну из кнопок Добавить блок.
Нажмите одну из кнопок Добавить блок. Откроется коллекция доступных блоков. Вы можете найти блок “Код” или ввести в строку поиска ключевое слово “код”. Когда вы увидите блок “Код” (со значками скобок), нажмите на него, чтобы вставить фрагмент кода в сообщение.
Теперь вы должны увидеть поле с предложением “Write code…”.
Редактор WordPress Gutenberg поддерживает markdown, поэтому вы также можете найти и вставить блок Code, набрав в редакторе прямую косую черту (/), а затем начав писать “C” или “Code”. После этого WordPress покажет все соответствующие блоки, что позволит вам быстрее их вставить. Легко спутать блок “Код” и блок “Пользовательский HTML”. Однако блок Custom HTML предназначен для добавления пользовательского HTML для отображения на фронтенде, а не для добавления необработанного кода для отображения.
Шаг 2: Вставьте отображаемый код в поле блока кода
Теперь пришло время скопировать код, который вы хотите отобразить, и вставить его в поле “Write Code…”.
Теперь ваш код отображается внутри блока. Замечательно то, что блок Code учитывает все пробелы и табуляции, которые уже были в фрагменте кода. В результате он не должен отличаться от того, из которого вы его скопировали.
Шаг 3: Опубликовать и просмотреть результаты
Чтобы отобразить код в посте или странице WordPress, завершите процесс, нажав на кнопку Опубликовать. Вы также можете получить представление о том, как выглядит код перед публикацией, выбрав “Предварительный просмотр”.
После нажатия кнопки “Опубликовать” посетите живую версию этого сообщения, чтобы убедиться, что ваш блок кода отображается в виде необработанного кода.
Как видите, блок Code довольно прост, но он обеспечивает необходимую функциональность для сохранения форматирования при публикации кода в сообщениях блога.
Взгляните на приведенный ниже снимок экрана. В нашем примере ничего не изменилось по сравнению с исходным фрагментом кода; он просто был представлен на фронтенде в сером поле.
Шаг 4: Рассмотрите возможность форматирования блока “Код”
Чтобы сделать блок “Код” более заметным, подумайте о том, чтобы изменить его внешний вид по сравнению со стандартным. Чтобы открыть параметры стиля блока, выделите блок Code, затем выберите кнопку Settings (Настройки) (значок шестеренки). Откроется вкладка Блок, на которой отображаются только настройки блока для выбранного вами блока – в данном случае блока Код.
Вы можете стилизовать блок “Код” по своему усмотрению, изменив такие параметры, как цвет текста и фона.
Вы также можете:
- Изменить размер текста
- добавлять отступы и поля в поле кода
- включить рамку с заданной шириной и цветом
Как всегда, нажмите на кнопку “Опубликовать”, когда закончите редактирование блока, а затем просмотрите результаты на фронтенде вашего поста WordPress.
Метод 2: Использование плагина
Еще один способ отображения кода на WordPress – это установка плагина. Этот способ может показаться немного избыточным, учитывая, что в WordPress уже есть встроенный блок Code, но некоторые плагины предлагают дополнительные функции и инструменты форматирования, чтобы сделать работу с плагином стоящей. Короче говоря, вы можете сделать свои блоки кода красивее, чем то, что вы получите со стандартным блоком кода Gutenberg. Кроме того, некоторым пользователям классического редактора WordPress может быть проще работать с плагином, поскольку отображать код в классическом редакторе немного сложнее. Для начала вам необходимо выбрать плагин “подсветки синтаксиса”, что означает, что плагин будет выделять ваш исходный код и сохранять его форматирование.
Вот несколько авторитетных плагинов для отображения кода на WordPress:
- Enlighter
- SyntaxHighlighter Evolved
- Code Prettify
В этом руководстве мы будем использовать плагин Enlighter, поскольку он предлагает опции для маркировки типов кода, отображаемого в полях кода, а также множество других функций стилизации. Однако вы можете попробовать и другие плагины, поскольку все они в основном делают одно и то же.
Шаг 1: Установите плагин для подсветки синтаксиса
Установите плагин Enlighter – Customizable Syntax Highlighter на ваш сайт WordPress, используя предпочтительный метод установки плагина. После активации плагин будет готов вставить код в любой пост/страницу с блоком Gutenberg или кнопкой вставки классического редактора.
Шаг 2: Вставьте блок исходного кода Enlighter в сообщение
Если вы используете редактор блоков WordPress Gutenberg, откройте пост, в котором вы хотите отобразить код. Нажмите на одну из кнопок Добавить блок (значок +), чтобы открыть коллекцию доступных блоков. Найдите или введите ключевое слово для блока Enlighten Sourcecode. Нажмите на этот блок, чтобы вставить его в сообщение.
Шаг 3: Вставьте код в блок “Выделитель синтаксиса
Блок Enlighter Highlighter появится в редакторе блоков с заголовком “Generic Highlighting” и полем “Insert Sourcecode…”. Возьмите любой код, который вы хотите отобразить на WordPress, и вставьте/наберите его в поле “Insert Sourcecode…”.
В качестве подсветки синтаксиса плагин сохраняет все варианты форматирования и вкладки. Когда вы будете довольны результатом, нажмите на кнопку Опубликовать.
Шаг 4: Предварительный просмотр кода на фронтенде
Теперь вы можете просмотреть фронтенд вашего сообщения, чтобы увидеть то, что видят посетители сайта. Плагин Enlighter предлагает минималистичную тему по умолчанию для отображения кода, с номерами строк, чтобы помочь с организацией и ссылками.
Как мы уже говорили, использование плагина для отображения кода на WordPress имеет свои преимущества перед другими методами. Например, фронтенд-версия синтаксического плагина Enlighter выделяет строки при прокрутке кода.
В правом верхнем углу окна кода также есть несколько кнопок, в том числе одна, которая представляет код в виде обычного текста, без номеров строк.
Вторая кнопка называется Copy To Clipboard, которая мгновенно копирует все, что находится в поле кода, в буфер обмена пользователя, который он может взять и вставить в любую программу.
Наконец, третья кнопка открывает код в новом окне, представляя его в виде обычного текста в окне вашего браузера.
Шаг 5: Установите язык и настройки строк для блока кода
Плагин Enlighter поставляется с различными темами и мощными инструментами настройки, позволяющими придать блоку кода тот вид, который вы хотите. Если вы не хотите использовать тему по умолчанию, вернитесь к своему посту в WordPress и нажмите на открытый блок Enlighter Sourcecode. Это откроет боковую панель блока в WordPress. Если она не появилась, обязательно нажмите кнопку Настройки (значок шестеренки) в правом верхнем углу окна WordPress. Первым параметром, который необходимо настроить, является поле Язык – оно указывает плагину, на каком языке отображается код, чтобы он мог предложить правильное форматирование и подсветку.
Существует довольно много языков кодирования, поэтому пролистайте список и выберите наиболее подходящий.
В поле Специальные строки выделяются все указанные вами строки. Чтобы это произошло, введите номера строк, разделенные запятыми.
В результате посетители сайта видят выделенные строки для всех тех, которые вы указали.
Поле Lineoffset – это способ начать фрагмент кода с определенной пронумерованной строки, что полезно, если вы отображаете только часть кода, который является частью большей коллекции строк.
Как вы можете видеть, ввод 10 в поле Lineoffset начинает все поле кода с цифры 10.
Шаг 6: Выберите тему
Тема Enlighter является темой по умолчанию для этого плагина. Однако в поле “Тема” (все еще под панелью настроек блока) представлен широкий выбор встроенных тем.
Например, тема “Годзилла” отображает код так, как будто он находится на графической или чертежной бумаге.
А тема Atomic меняет фон на темный, предлагая в основном белый текст и розовый цвет для тегов кода.
Другой пример – тема Classic, которая представляет собой менее минималистичную версию темы Enlighter с более яркими цветами и более четкими линиями.
Шаг 7: Рассмотрите возможность создания пользовательской темы
Плагин Enlighter предоставляет вкладку в приборной панели WordPress для настройки каждого аспекта плагина и его функций подсветки. Чтобы получить полный контроль над дизайном и отображением полей кода, перейдите на вкладку Enlighter (значок <>), затем выберите “Внешний вид” или “Настройщик темы”.
Вкладка “Внешний вид” позволяет выбрать стандартную тему, а также дает доступ к настройке таких элементов, как:
- Отступ кода
- переполнение текста
- Нумерация строк
- эффект нависания строки
- RAW-код при двойном щелчке
Раздел настройки темы включает длинный список вкладок для создания темы подсветки кода с нуля, с возможностью настройки кнопок, выражений, языков и многого другого.
Бонус: Использование Enlighter с классическим редактором
Плагин Enlighter работает несколько иначе для тех, кто все еще использует классический редактор WordPress. После установки плагина Enlighter перейдите на любой пост или страницу и найдите кнопку Enlighter Code Insert на панели управления редактора.
Откроется новое окно Enlighter Code Insert. Вставьте код, который вы хотите отобразить, в большое (немаркированное) поле внизу.
Щелкните по выпадающему меню в поле Язык, чтобы выбрать нужный язык кодирования.
Как только вы закончите, нажмите на кнопку OK. В этом окне вы также можете внести изменения в другие функции, например, добавить отступ от строки.
Нажмите кнопку “Опубликовать” для сообщения, а затем просмотрите результаты на фронтенде. По умолчанию для Классического редактора используется темная тема, но вы можете изменить внешний вид поля кода и даже создать свои собственные темы.
Метод 3: Использование инструмента кодировщика
Инструменты кодировщика служат альтернативным вариантом при попытке отобразить код в WordPress, особенно если вы не собираетесь делать это часто (и не хотите возиться с плагином). HTML-кодировщики сохраняют целостность форматов кода, особенно тех, которые содержат специальные символы и табуляции. Кодировщики могут работать со всеми типами кода, но затем они преобразуют вставленный код в HTML-код, который легко вставить в WordPress.
Надежных инструментов кодирования в виде плагинов не существует, но многие из них предлагаются в виде бесплатных веб-приложений сторонних разработчиков. Обратите внимание, что инструменты кодировщика не предлагают никаких инструментов стилизации, поэтому вы получите код только в том виде, в котором он должен отображаться (без причудливых рамок или функций настройки строк).
Некоторые надежные инструменты кодирования включают:
- W3Docs HTML Encoder
- Opinionated Geek HTML Encoder
- Web2Generators HTML Encoder and Decoder
По результатам нашего тестирования, наиболее эффективным инструментом кодирования является W3Docs HTML Encoder, поэтому мы будем использовать его в этом руководстве.
Шаг 1: Откройте кодировщик и выберите настройки
Перейдите на веб-сайт W3Docs HTML Encoder. На странице показаны два расположенных рядом поля. В левое нужно вставить свой код. В правом отображается закодированная версия для копирования и вставки в WordPress.
Однако сначала вы должны указать, какой тип кода вы хотите сохранить:
- Выберите JavaScript unicode, если вставляете код с элементами JavaScript.
- При использовании HTML используйте символы HTML.
Шаг 2: Вставьте и нажмите для кодирования
Вставьте в левое поле код, который вы хотите отобразить в WordPress. Затем найдите и нажмите на кнопку Encode справа вверху.
Шаг 3: Скопируйте декодированный результат
Готовый продукт может выглядеть запутанным, но на самом деле это комбинация HTML-элементов, позволяющая сохранить все аспекты вставленного кода, не заставляя его активироваться и показывать что-то другое на фронтенде. Нажмите кнопку Копировать.
Шаг 4: Вставьте закодированный HTML в редактор кода или текста WordPress
Вернитесь в WordPress и откройте нужный пост или страницу. Выберите пункт меню Options (три вертикальные точки) в правом верхнем углу. Нажмите на пункт Редактор кода.
Теперь вы увидите редактор кода, а не визуальный редактор блоков. Найдите область, в которой вы хотите отобразить код, и вставьте закодированный HTML в редактор.
Если вы используете классический редактор WordPress, вам необходимо перейти на вкладку “Текст”, которая аналогична редактору кода из редактора блоков Gutenberg.
Шаг 5: Опубликовать и просмотреть код
Нажмите кнопку Обновить или Опубликовать для сообщения, затем перейдите во фронтенд этого сообщения, чтобы посмотреть, как оно выглядит.
Вы должны увидеть исходный код, который был вставлен в кодировщик, до того, как инструмент добавил элементы HTML-кодирования. Как уже упоминалось, в кодировщиках нет никаких функций стилизации, поэтому это прекрасный метод для создания чистого, минималистичного внешнего вида.
Метод 4: Использование пользовательского шорткода
Создание пользовательского шорткода позволяет вставлять фрагменты многократно используемого кода без необходимости копирования и вставки. Именно поэтому пользовательские шорткоды предоставляют широкие возможности для отображения кода на WordPress.
Вот преимущества использования пользовательских шорткодов для отображения кода:
- Пользовательские шорткоды позволяют сохранить сложный код один раз, а затем использовать его повторно, избавляя вас от необходимости каждый раз набирать длинные фрагменты кода.
- Вы можете написать свой собственный CSS-стиль для подсветки кода и полей.
- Шорткоды могут использоваться кем угодно, поэтому другие участники могут воспользоваться преимуществами ваших выделителей и блоков кода одним нажатием кнопки.
Создание пользовательского шорткода требует опыта редактирования файлов темы WordPress, работы с PHP-кодом и, возможно, создания плагинов WordPress. Из-за этих требований создание пользовательского шорткода для WordPress может быть сложным для новичков в PHP. Однако готовый продукт позволяет значительно упростить отображение кода на WordPress.
Вы можете назвать пользовательский шорткод как угодно и создать несколько вариантов, например [html] [/html] и [css] [/css], для разных языков кодирования.
Помните, что пользовательские шорткоды лучше всего работают для подсветки синтаксиса при использовании текстового редактора (в WordPress Classic) или блока Custom HTML при работе с редактором блоков WordPress Gutenberg.
Цель – создать пользовательский шорткод, в котором вы можете вводить или вставлять код между открывающим и закрывающим тегами шорткода.
После публикации ваши пользовательские настройки стилизации и подсветки шорткодов отображаются на фронтенде. А добавленный вами код прекрасно отображается в подсветке синтаксиса.
Метод 5: Использование тегов <code> и <pre>
Возможно, самым старым – но все еще невероятно надежным – способом отображения кода на WordPress является простое добавление определенных HTML-тегов вокруг фрагмента кода. Этот способ лучше всего подходит для работы в классическом редакторе WordPress или в любом HTML-редакторе.
Есть два варианта:
- Тег <code>: Лучше всего подходят для отображения короткой строки кода; часто используются в абзацах
- Тег <pre>: Идеально подходят для длинных блоков кода, или когда вы хотите получить больше возможностей форматирования
Вариант 1: Используйте тег <code> для встроенных сниппетов кода
Создатели контента, пишущие о кодировании, не всегда хотят использовать большие блоки кода. Иногда имеет смысл поместить небольшой фрагмент кода внутри абзаца. Однако вам все равно нужно выделить и сохранить форматирование этого кода. А некоторые коды могут вызвать проблемы с окружающим контентом, если они не будут сохранены должным образом.
Возьмем, к примеру, тег <br> – без тегов <code> он просто добавляет разрыв к вашему абзацу.
Размещение кодировки внутри этих тегов позволяет получить гораздо более чистый результат:
<code> </code>Для этого откройте сообщение WordPress и включите либо редактор кода (для редактора блоков Gutenberg), либо текстовый редактор (при использовании WordPress Classic). Вставьте или напечатайте эти теги в редакторе; не вставляйте код, который вы хотите отобразить. Вместо этого добавьте пробел между тегами.
<code> </code>
Переключитесь на визуальный редактор (независимо от того, находитесь ли вы в Gutenberg или Classic WordPress). Вы увидите небольшое серое пространство внутри визуального контента. Щелкните, чтобы поместить курсор в это серое пространство. Здесь вы можете вставить или ввести код для отображения.
По мере ввода серое пространство расширяется, чтобы вместить фрагмент кода. Нажмите кнопку Опубликовать или Обновить для этого сообщения.
Теперь на фронтенде поста вы увидите код, сохраненный так, как он должен быть, и без каких-либо странных действий (например, добавления разрыва в контент).
Форматирование этих тегов <code> обычно не имеет смысла, но оно часто зависит от стиля вашей темы. Например, наш пример изменяет только шрифт, но не включает серый фон.
Вариант 2: Используйте теги <pre> для более длинных блоков кода
Более длинные фрагменты кода заслуживают отдельных блоков, отделенных от всего содержимого, которое вы пишете, в виде абзацев. Для них мы рекомендуем использовать теги <pre>. Процесс добавления тега <pre> такой же, как и в случае с тегами <code>, но у вас больше пространства для работы, когда нужно вставить код. Перейдите к сообщению и откройте редактор Code (Gutenberg) или Text (Classic WordPress). Вставьте или введите код, который вы хотите отобразить. Затем окружите код этими тегами:
<pre> </pre>
Переключитесь в визуальный редактор, чтобы посмотреть, как это выглядит. Вы заметите, что участок текста будет иметь метку “Preformatted”, что является именно тем, для чего предназначен тег <pre>.
Нажмите кнопку Опубликовать или Обновить, затем переключитесь на фронтенд, чтобы увидеть ваш код в его первоначальном виде. Как и теги <code>, теги <pre> плохо поддаются форматированию, поэтому вам остается выбрать самый простой вид. Однако есть способы стилизовать их самостоятельно.
Советы по стилизации тегов <pre>
Теги <pre> менее стабильны, чем теги <code>, поэтому вы можете столкнуться с трудностями в зависимости от типа кода, который вы пытаетесь показать.
Используйте эти советы, чтобы улучшить внешний вид:
- Постарайтесь убрать или полностью избежать переносов строк, поскольку тег <pre> часто не распознает их. В целом, он плохо реагирует на слишком большое количество переносов строк.
- Рассмотрите возможность добавления свойства overflow-x:auto; в CSS, чтобы добавить функцию прокрутки в код тега <pre>. Это поможет при переполнении контента, поскольку тег <pre> сам по себе позволяет вашему коду убегать за пределы страницы.
- Придерживайтесь моноширинного шрифта.
Вы также можете стилизовать форматирование текста и рамку за кодом. Вот начальный шаблон, который вы можете добавить в свой CSS-файл:
article pre{
background:#ffffff;
border:3px #eee solid;
border-top:30px #eee solid;
font-family:Consolas, courier;
font-size:0.8em;
white-space:pre;
overflow-x:auto;
}Метод 6: Использование редактора Markdown, подключаемого к WordPress
Редакторы Markdown позволяют не только быстрее набирать и форматировать текст, но многие из них подключаются непосредственно к WordPress для мгновенной публикации прямо из редактора.
Многие писатели обращаются к редакторам уценки из-за такого быстрого процесса создания контента. К счастью, некоторые из этих редакторов предлагают разметку для блоков кода, то есть вы можете отобразить код в редакторе разметки, а затем отправить его прямо в WordPress для публикации.
Помните, что обычные текстовые редакторы (например, Sublime Text) не сохраняют целостность кода при передаче для публикации на WordPress. А HTML-редакторы, хотя и отлично подходят для написания и хранения кода, не предоставляют функций выделения, необходимых для сохранения кода при публикации на WordPress.
Существует множество редакторов разметки, но идеальные решения имеют две общие черты:
- Прямой экспорт в WordPress
- Markdown для выделения кода
Однако вы можете выбрать редактор разметки с экспортом HTML, если вам не нравится прямой экспорт в WordPress.
Лучшими редакторами разметки с обеими функциями являются:
Ulysses и ByWord являются премиум-приложениями, а Obsidian имеет как бесплатную, так и премиум-версию. В следующем руководстве мы будем использовать Ulysses.
Шаг 1: Добавьте блок длинного кода в Ulysses
При составлении документа в Ulysses набирайте ” markdown – это два апострофа – всякий раз, когда вы хотите немедленно добавить блок выделения кода в документ. Этот метод разметки предназначен для длинных блоков кода. Он не может быть использован в середине абзаца, поэтому вы должны создать новую строку, чтобы активировать уценку.
Когда появится выделитель кода, вы можете набрать или вставить в него все, что захотите.
Другой способ включить блок кода – щелкнуть на пункте меню Markdown (три горизонтальные точки), затем выбрать опцию Code.
После щелчка на этом пункте меню поле для выделения кода появится там, где курсор находился в последний раз.
Для размещения фрагментов кода внутри абзацев, вы можете использовать “ markdown (выглядит почти так же, но на самом деле это два острых/огненных ударения вместо апострофов).
Шаг 2: Экспорт в WordPress
Когда документ готов, пришло время экспортировать его в WordPress. Самое замечательное в редакторах markdown, которые работают с WordPress, то, что они сохраняют блоки кода на протяжении всего процесса переноса. Таким образом, вы увидите красиво отформатированные выделения кода, готовые к публикации в WordPress.
В Ulysses перейдите в верхнюю часть документа, чтобы найти панель инструментов. Нажмите кнопку Предварительный просмотр публикации.
Это вызовет выпадающее меню для выбора платформы и веб-сайта для публикации. Вы также можете воспользоваться опцией Manage Accounts в этом меню, чтобы войти на сайт WordPress перед экспортом. Выбрав нужный веб-сайт, нажмите кнопку Опубликовать.
Заполните название поста, расписание и любую другую информацию, которую вы хотите указать, например, категории, теги и тематические изображения. Самое важное – установить статус “Черновик”, чтобы не публиковать пост, не просмотрев его сначала на WordPress. Нажмите OK, чтобы продолжить.
В течение нескольких секунд Ulysses поместит весь документ в новый пост WordPress (возможно, вам придется войти в админку WordPress, когда он появится). Вы увидите блоки кода, уже настроенные и готовые к публикации. Нажмите кнопку “Опубликовать”, чтобы начать работу.
На переднем плане вы увидите, что встроенные фрагменты кода и большие блоки кода хорошо выделены, а форматирование кода сохранено.
Заключение
Существует несколько способов правильного отображения кода на WordPress, и часто это зависит от используемого редактора WordPress, языка кода, который вы хотите отобразить, а также от того, как вы хотите отобразить и отформатировать этот код. Например, выбор плагина, безусловно, обеспечит более творческое форматирование, чем стандартный блок Code в редакторе WordPress Gutenberg. В этой статье мы рассмотрели множество различных методов, иллюстрирующих отображение кода в WordPress. Обычно мы рекомендуем начать с метода 1 и проделать весь путь. Метод 2 подойдет вам, если вы ищете больше вариантов стилизации, а методы 3-5 полезны только в определенных ситуациях. Метод 6 является в некотором роде бонусным решением, предназначенным для тех, кто предпочитает редакторы разметки, а не писать непосредственно в WordPress.
