(Последнее обновление: 01.07.2016)

Crayon- Syntax-HighlighterВсем доброго времени суток! Как и обещал, эту неделю посвящаю нужным плагинам для движка Wordpress. Сегодня речь пойдет о плагинах с помощью которых можно выделить, то есть, подсветить синтаксис кода HTML, PHP, CSS, JavaScript и другие языки программирования на страницах сообщения.

Подсветка синтаксиса кода в WordPress необходима нам, если нужно вставить фрагмент кода на разных языках программирования в текст статьи, для того, чтобы читатели блога могли его скопировать работоспособным. Просто взять и вставить код в статью нам не получится, а все дело в том, что вордпресс изменит его по своему и код окажется поломанным. Для вставки и подсветки кода в WordPress существует много плагинов, но так как темы у всех разные, не каждый плагин подойдет. Методом проб и ошибок нужно умудриться подобрать модуль, конкретно под свой шаблон. Я остановил свой выбор на двух плагинах это - Плагин SyntaxHighlighter Evolved и замечательный плагин Crayon Syntax Highlighter. Первым пользуюсь в блоге "Школа Bloggera", а вторым здесь.

Плагин  Syntax Highlighter - подсветка синтаксиса кода CSS, HTML, PHP на сайте

Установка, настройка и как пользоваться плагином Crayon

Crayon-Syntax-Highlighter

Плагин Crayon Syntax Highlighter

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

Установка обычная, через загрузчик плагинов. "Раздел Плагины" - "Добавить новый", в поле для поиска вводим название Crayon Syntax Highlighter и кликаем "Поиск". После успешной установки и активации плагина в разделе "Параметры" появится пункт Crayon. Нажимаем на него и откроется страница на русском языке для настроек модуля. Проблем с настройками у вас возникнуть не должно:

Crayon-Syntax-Highlighter-plagin-nastrojka

Crayon Syntax Highlighter настройки

Тем для отображения блоков с подсветкой кода много, приведу пару примеров:

Crayon-Syntax-Highlighter-1

Подсветка синтасиса кода

Crayon- Syntax- Highlighter-stili

Crayon Syntax Highlighter

Настроек множество, с подсказками. Только не забудьте после тонкой настройки плагина сохранить изменения.

Далее, как пользоваться плагином Crayon Syntax Highlighter. У вас в визуальном редакторе сообщений появится специальная новая кнопка:

knopka-Crayon

Как пользоваться плагином Crayon Syntax Highlighter

При написании статьи, когда появится необходимость вставить код, нажмите на эту кнопочку. Появится окно "Редактор тегов", куда необходимо вставить нужный код, выбрать язык программирования и нажать "Добавить":

Редактор- Тегов-Crayon- Syntax- Highlighter

Добавить код Crayon

Все. Правда, очень легко? Вот поэтому я его и установил, при том плагин  недавно обновился.

Плагин SyntaxHighlighter Evolved - подсветка синтаксиса кода CSS, HTML, PHP WordPress

Установка и настройка

SyntaxHighlighter- Evolved

Плагин SyntaxHighlighter Evolved - подсветка синтаксиса кода для WordPress

SyntaxHighlighter Evolved позволяет легко размещать подсвеченный код на сайте. Установка плагина происходит таким же образом, как написано выше. Для настройки плагина перейдите в административную панель WordPress блога в раздел "Параметры" – "Syntax Highlighter". Мы попадем на страницу:

SyntaxHighlighter-Evolved-plagin

Настройки плагина Syntax Highlighter

Здесь, все просто. Нужно выбрать цвет оформления подсветки блока с кодом:

Syntax- Highlighter

Syntax Highlighter подсветка кода

Затем, отметьте нужные параметры и нажмите сохранить изменения.

Как сделать подсветку кода CSS , HTML , PHP в сообщениях блога

Если в тексте статьи Вы захотите разместить php код и подсветить его, необходимо его заключить в теги:

[php]ваш код здесь[/php]

Код js:

[code lang="js"]ваш код здесь[/code]

И так далее. Все теги указаны на странице настроек плагина, в самом низу. Да, чуть не забыл, код вставлять надо в визуальном редакторе, а заключать в теги - режим "Текст". Вот и все о чем я хотел поведать вам сегодня. До встречи.