Подсветка кода: обзор самых простых и удобных плагин

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

Существует много плагин для WordPress которые автоматизируют подсветку опубликованного кода. По принципу работы их можно разбить на два лагеря: — первые используют JS на стороне клиента (Prizm, CodeMirror, SHJS и другие) , вторые — PHP скрипты на стороне сервера (GeSHi). Последние — менее популярные в наше время.

• Code Prettify
• AH Code Highlighter
• APH Prism Syntax Highlighter
• Easy Code
• Enlighter
• Заключение

---

Code Prettify

Полностью автоматически подсвечивает код посредством JS при полном отсутствии настроек. Работает на все, что заключено в теге <pre> или <code>. Все очень неплохо. Один недостаток — отсутствие тем. Но итоговая страничка с кодом выглядит очень симпатично.

Рекомендован тем, кто вообще не хочет с подсветкой заморачиваться.

---

AH Code Higlighter

Плагин AH Code Higlighter основан на JS скрипте Prizm — самый легчайший способ подсветить ваш код. Можно выбрать одну из восьми тем для подсветки практически любого языка программирования и разметки. После установки и активации плагина зайдите на страницу настроек Настройки>AH Code Higlighter и выберете одну из восьми тем.

Чтобы ввести блок кода на страницу добавьте блок форматирование > классический и в блоке выберете Code.

В открывшемся редакторе выберете язык программирования и введите код в окне редактора, позволяющего ряд настроек:

В итоге получается достаточно симпатичная страничка с кодом:

Рекомендован тем, кто просто хочет выбрать свою тему для кода и ничего более.

---

APH Prism Syntax Highlighter

Также основан на Prizm. После установки и активации перейдите на Settings » Prism Highlighter чтобы изменить опции или оставить их как есть. По сравнению с AH Code Higlighter плагином список настроек увеличен. В частности, доступно ограничить максимальную высоту блока с кодом.

Чтобы вывести блок с кодом на страницу необходимо добавить блок Основные блоки > APH Prism (ввод через блок Классический не работает!).

Далее вводим код в редакторе:

И на выходе получаем такую страницу с кодом:

Рекомендован для тех, кто любить немного повозиться с настройками.

---

Easy Code

Мощный плагин позволяющий большое количество тем и настроек для отображения кода. Используя обработку подсветки как на стороне сервера посредстовм GeSHi, так и на стороне клиента, используя JS SyntaxHighlighter.

Чтобы добавит блок с кодом, добавляем стандартный блок «классический» и находим там кнопку:

Через окошко редактора, позволяющее выбрать несколько настроек, вносим код для отображения:

В итоге, с одной из тем, все выглядит так:

Рекомендован для продвинутых.

---

Enlighter

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

Для ввода кода необходимо выбрать блок <> Enlighter Source Code

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

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

Рекомендован для продвинутых.

Заключение.

Заметка не претендует на обзор самых популярных плагин подсветки кода. Скорее принцип отбора был другой — самые удобные и надежные.

В качестве лирического отступления: в сети существует много ресурсов для подсветки кода online по принципу «вставил-получил», например https://higkight.hohli.com.

Рад если был полезен, пишите, комментируйте, обсудим.

admin@allrecall.ru