Как вставить пример кода в записях и на страницах WordPress: 7 плагинов

Вы когда-либо пытались скопировать и вставить фрагмент кода в WordPress? Это не работает! WordPress не может отличить фрагмент кода, который вы просто хотели бы продемонстрировать, от фрагмента, который должен выполнить какое-то действие.

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

Как вставить пример кода в записях и на страницах WordPress: 7 плагинов

Смотрите также:

  • Как добавить подсветку синтаксиса в коде, используя Prism.js
  • Улучшаем вид редактора кода WordPress при помощи CodeMirror
  • Куда вставлять этот программный код в WordPress? Общая структура файлов темы
  • 15 полезных WordPress плагинов для вставки шорткодов
  • Как добавить кнопку на админ панель для быстрой правки кода WordPress темы

Встроенный в WordPress метод, чтобы поделиться кодом

Давайте начнём с начала:

WordPress имеет в себя пару встроенных способов для выведения фрагментов кода. Они не красивые, но функциональные. Двумя базовыми способами являются тэги <code> и <pre>.

Оба отобразят фрагменты кода, различия заключаются в оформлении, которое зависит от темы.

Например, вот так выглядят данные тэги в стандартной теме WordPress Twenty Sixteen:

Как вставить пример кода в записях и на страницах WordPress: 7 плагинов

Но у данных тэгов есть проблемы:

  1. Вы должны записать пример кода, как строку до его выведения. Для этого необходимо вставить код в энкодер, к примеру, Code Beautify, а потом вставить результат между тэгами <code> и <pre>.
  2. Нет нумерации строк, чтобы упростить чтение кода.
  3. Нет подсветки синтаксиса. Подсветка синтаксиса окрашивает различные элементы кода в различные цвета, что делает программный код более читабельным.

Давайте сейчас приступим к способам добавления фрагментов кода в WordPress, которые упростят вам процесс вставки сниппетов, а посетителям их чтение.

1. SyntaxHighlighter Evolved


Как вставить пример кода в записях и на страницах WordPress: 7 плагинов

SyntaxHighlighter Evolved – это популярный плагин для вставки нумерованных сниппетов с подсвеченным синтаксисом в WordPress. Всё, что необходимо сделать – это завернуть код в соответствующий шорткод и потом отобразить примерно так:

Как вставить пример кода в записях и на страницах WordPress: 7 плагинов

Вы можете также использовать различные стили для выведения кода, например, перенос строк, но посетителям будет сложно копировать и вставит программный код:

Как вставить пример кода в записях и на страницах WordPress: 7 плагинов

Основные возможности:

  • Добавление нумерации строк фрагмента кода
  • Добавление подсветки синтаксиса
  • Различные цветовые настройки
  • Может добавить пользовательские классы CSS для более красивого внешнего вида

2. Crayon Syntax Highlighter


Как вставить пример кода в записях и на страницах WordPress: 7 плагинов

Crayon Syntax Highlighter – это ещё один популярный плагин, который добавляет нумерацию строк и подсветку синтаксиса к фрагменту кода. В сравнении с SyntaxHighlighter Evolved, у Crayon Syntax Highlighter есть больше параметров. Вы можете изменить практически всё во вкладке параметра.

Вы можете без труда также автоматом дублировать стиль Sublime Text(популярного текстового редактора):

Как вставить пример кода в записях и на страницах WordPress: 7 плагинов

Основные возможности:

  • Добавление нумерации строк фрагмента кода
  • Добавление подсветки синтаксиса
  • Поддержка 65 различных языков
  • Несколько стилей, некоторые из которых имитируют популярные редакторы кода
  • Простота в параметру любого аспекта выведения сниппета

3. oEmbed Gist


Как вставить пример кода в записях и на страницах WordPress: 7 плагинов

oEmbed – это простой плагин, который может вам вставить gist(сниппет и краткое разъяснение к нему). Для использования этого плагина вам просто необходимо вставить код в gist Editor и создать публичный gist:

Как вставить пример кода в записях и на страницах WordPress: 7 плагинов

А потом просто вставить gist URL в WordPress Editor, и плагин автоматически вставит сниппет кода:

Как вставить пример кода в записях и на страницах WordPress: 7 плагинов

Основные возможности:

  • Превосходит GitHub Gist
  • Вставляет gist, вставив URL
  • Может вставить один файл из многофайлового gist

4. WP-GeSHi-Highlight


Как вставить пример кода в записях и на страницах WordPress: 7 плагинов

WP-GeSHi-Highlight – это ещё один плагин, который добавляет нумерацию строк и подсветку синтаксиса коду, который вы вставили в редактор WordPress. С ним вы можете

использовать обычные тэги <pre>, пока вы определяете язык программирования.

WP-GeSHi-Highlight – это лёгкий плагин, с точки зрения функциональности и выводимого кода:

Как вставить пример кода в записях и на страницах WordPress: 7 плагинов

Основные возможности:

  • Подсветка синтаксиса при помощи GeSHi
  • Добавление дополнительной нумерации строк
  • Вставьте код с стандартными тэгами <pre> и определённым языком
  • Лёгкость – добавляет только один HTTP запрос

5. Pastebin


Как вставить пример кода в записях и на страницах WordPress: 7 плагинов

Pastebin – это ещё один сайт для того, чтобы делиться сниппетами кода. Его работа схожа с работой инструмента GitHub Gist, который мы показали вам ранее. И как GitHub Gist, этот плагин делает вставку Pastebin кода на веб-сайт WordPress лёгкой.

Всё, что вам необходимо сделать, это добавить код на Pastebin, а потом просто вставить Pastebin URL в редактор WordPress. Ваш сниппет вставится автоматом:

Как вставить пример кода в записях и на страницах WordPress: 7 плагинов

Показывать нумерацию строк или нет, зависит от параметров Pastebin.

Основные возможности:

  • Вставка кода напрямую из Pastebin
  • Доступны нумерация строк и подсветка синтаксиса
  • Просто вставьте URL в WordPress Editor
  • Можете без проблем также вставить шорткод и Pastebin ID

6. Pastacode


Как вставить пример кода в записях и на страницах WordPress: 7 плагинов

Pastacode поможет вам вставить сниппет кода, используя популярную библиотеку PrismJs. Вы можете без проблем подсветить особые строки кода и настроить стиль, используя одну из доступных тем. Pastacode также поддерживает вставку кода из GitHub, Gist, Pastebin, BitBucket или BitBucket.

Как вставить пример кода в записях и на страницах WordPress: 7 плагинов

Основные возможности:

  • Добавление нумерованных строк к фрагменту кода
  • Добавление подсветки синтаксиса фрагментов кода
  • Использование библиотеки PrismJs
  • Функция вставлять код из GitHub, Gist, Pastebin, и т.д.
  • Функция подсвечивать особые строки кода

7. Code Prettify


Как вставить пример кода в записях и на страницах WordPress: 7 плагинов

Code Prettify использует библиотеку Google Code Prettify для автоматического добавления подсветки к <pre> и <code>. С данным плагином сниппет кода будет выглядеть, как внизу, а не так, как мы показывали вначале данной статьи:

Как вставить пример кода в записях и на страницах WordPress: 7 плагинов

Основные возможности:

  • Работает с стандартными тэгами <pre> и <code>
  • Использует библиотеку Google Code Prettify
  • Правильно уменьшает и ставит в очередь

Итоги

Данные плагины помогут вам вставить фрагмент кода напрямую в запись или добавить программный код из стороннего инструмента, как GitHub или Pastebin. Если бы нам пришлось выбирать фаворита, то это был бы Crayon Syntax Highlighter за разнообразие тем и стилей, которые можно легко использовать.

А у вас есть любимый способ выведения сниппетов кода в записях WordPress? Расскажите нам в комментариях!

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

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