Плагины для вставки кода с подсветкой синтаксиса кодов CSS, HTML, PHP

1

Автор verond | Рубрики Настройки вордпресс, Плагины вордпресс | 14-04-2014


Блоггеру, который публикует материалы, связанные с веб технологиями часто приходится размещать пример того или иного кода. К тому же, мы все привыкли видеть код с подсветкой синтаксиса CSS, HTML, PHP и других языков программирования. В стандартном редакторе вордпресс вставить такой код не получится, потому что WordPress будет стараться выполнить его и в статье останется обрезанный код.

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

Моя задача: первое — найти рабочий плагин подсветки синтаксиса, второе – с красивым эффектом. Как оказалось на практике, это не так быстро. Мне пришлось поочередно проверять весь этот список.

 

Плагин Syntax Highlight Evolved

 

Скачать http://wordpress.org/plugins/syntaxhighlighter/

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

 

Так увидит пользователь вставленный код:

Плагин Syntax Highlight Evolved

Установка плагина стандартная. После активации будут доступны настройки подсветки синтаксиса.

Настройки подсветки синтаксиса

Сохраните сделанные настройки и внизу вы увидите результат. Пример одного из вариантов цветового решения:

Выбор цветовой схемы

Для того, чтобы вставить код в вашу заметку, нужно перейти на редактор HTML и вставить в нужное место shortcode – короткий код. Примеры:

[php]ваш code здесь[/php] – самый короткий и простой.

[code lang=»js»]ваш code здесь[/code]

[code lang=»php»]ваш code здесь[/code]

 

На что нужно обратить внимание.

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

 

Плагин Crayon Syntax Highlighter

 

Скачать http://wordpress.org/plugins/crayon-syntax-highlighter/

Русский язык поддерживает.

Плагин Crayon Syntax Highlighter

Настроек у него много, но самое главное удобство, что код можно будет вставлять автоматически. В редакторе появился специальная кнопочка, на которую просто нужно нажать и заполнить появившееся окно с настройками показа программного кода на странице.

Кнопка в визуальном редакторе

На моем блоге этот плагин не стал работать. Всплывающее окно зависало.

 

Еще один маленький хороший плагин.

 

Плагин WP-Syntax

 

Скачать http://wordpress.org/plugins/wp-syntax/

Настроек он не требует.

 

 

Плагин WP-Syntax

Для вставки кода в текст нужно использовать тег <pre> …. </pre> в режиме Html редактора.

Пример:

<pre lang=»LANGUAGE» line=»1″>…Ваш код…</pre>

 

 

Плагин WP-Syntax Button

 

Скачать http://wordpress.org/plugins/wp-syntax-button/

Дополняет WP-Syntax — создает дополнительную кнопочку в визуальном редакторе, наподобие Crayon Syntax Highlighter, что упрощает работу.

Плагин WP-Syntax Button

Все настройки после этого можно будет сделать в таком окошке:

Настройки визуальные

Хотя его обновления старые, но он функционирует.

Результат на скрине:

ПРимер кода с подсветкой

 

 

Плагин CodeColorer

 

Скачать http://wordpress.org/plugins/codecolorer/

Русифицирован. Работает на основе GeSHi.

Красивое форматирование. Много настроек можно сделать со страницы плагина «CodeColorer: Настройки подсветки синтаксиса». Есть готовые цветовые схемы.

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

Плагин CodeColorer

Для вставки кода используется синтаксис

Синтаксис плагина
или

1
<code lang="php">  код

и закрывающий добавьте сами.

Если не указать язык программировании в lang, то подсветки не будет.

Для строчных блоков используйте:

Вариант строчного синтаксиса

Схема сокращенного  шорткода:

1
[ccMODE_LANG]

 

Синтаксис для CodeColorer

На этом примере используем синтаксис <code lang=»php»>code</code>:

Пример подсвеченного синтаксиса

 

 

Вывод:

CodeColorer — лучший плагин для подсветки синтаксиса в постах WordPress!

Связка WP-Syntax и WPSyntax Button – самый простой способ.

 

 

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

 Можно найти и другие на официальном сайте вордпресс. Введите в поиск плагинов «Syntax» и получите полный список.

 

Еще парочка плагинов вордпресс на основе GeSHi.

 

iG:Syntax Hiliter

 

 

Скачать http://wordpress.org/plugins/igsyntax-hiliter/changelog/

iG:Syntax Hiliter

 

Highlight Source Pro

 

Скачать http://wordpress.org/plugins/highlight-source-pro/

 

А каким способом пользуетесь вы на своих блогах, чтобы вставить корректно программный код и подсветить синтаксис?

Добавляйте пост в свои любимые социальные сети, и Вы сможете вернуться к этой записи в любое время.


Комментарии (1)

без плагина есть вариант?

Написать комментарий