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

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

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


Code Prettify

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

Подсвеченный код плагином Code Prettify

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


AH Code Higlighter

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

AH Code Highlighter — страница настроек

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

AH Code Highlighter — кнопка открытия окна редактора

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

AH Code Highlighter — окно редактора

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

AH Code Highlighter — отображение кода на странице

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


APH Prism Syntax Highlighter

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

APH Prism Syntax Highlighter — страница настроек

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

APH Prism Syntax Highlighter — кнопка выбора блока с кодом

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

APH Prism Syntax Highlighter — окно редактора

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

APH Prism Syntax Highlighter — отображение кода странице

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


Easy Code

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

Easy Code — общие настройки
Easy Code — настройка внешнего вида
Easy Code — настройка подсвечиваемых языков

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

Easy Code — кнопка выбора в блоке «классический»

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

Easy Code — окно редактора

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

Easy Code — окно вывода кода на страницу

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


Enlighter

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

Enlighter — настройка отображения
Enlighter — настройка и выбор темы
Enlighter — настройки редактора
Enlighter — настройки совместимости
Enlighter — настройка расширений
Enlighter — другие опции

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

Enlighter — кнопка выбора блока

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

Enlighter — индивидуальная настройка блока

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

Enlighter — окно выода кода

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

Заключение.

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

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

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

admin@allrecall.ru

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

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

Найти на сайте
Со страниц сайта
Метки
хохмаУмные мыслиармейский юморДела семейныеДокторинформацияой болитфольклорВовочка & kidsВадим ЗверевПолитическиеСтатусы ВКотактеСобрание скороговорокБольшие и малые народностиПро животныхЗаконы МерфиженщиныПро это...Забойный наборНиколай ФоменкоВсякая всякотаалкоманы-наркоголикиВиктор ШендеровичПро услуги и рестораныБородатые анекдотыавтомобилистыТуристы и турыИскусство и киноКозьма ПрутковПро студентовПро работуОмар ХайямЧерномырдинСтатусы про женщин и мужчинВ общественном транспортеПро сумасшедшихСтанислав Ежи ЛецКриминальныеПро ШтирлицаСтас ЯнковскийСмешные статусыДурацкие законыПро юристовпро самолетыПечалькаПро братковХорошие советыНе та ориентацияМарк ТвенСтатусы про жизньНа селеКрасноармейскиеГусары и поручикиДразнилкиИностранные анекдотыСказочныеХрюн МоржовФрансуа де ЛарошфукоЧерный юморЖан-Жак РуссоОхота и рыбалкаПрограммистыЛеди и джентельменыСпортМультяшкиНа бога надейся...БизнесСчиталкиУильям ШекспирГеоргий ФрумкерФрансис БэконШутливая лотереяДикий западПраздникиБедные и богатыеРаневскаяПьер Огюстен Карон де БомаршеСоветы и ответыДикариИсторические анекдотыНикколо МакиавеллиНаполеон БонапартЗагадкиsongswordpresstraditionalpluginпоговоркиC#старостьЧастушкиmysqlbackendjavascripthostingsshajaxphpстатистикапандемия
Больше Меньше
Архивы
Рейтинг@Mail.ru