Как легко вывести сниппеты кода на своем WordPress сайте

Вы ведете блог о веб разработке и хотите делиться сниппетами кода в своих записях, как это делаем мы? По-умолчанию, выводить код в записях не очень просто. Из соображений безопасности WordPress фильтрует любой чистый код, добавленный в записи, виджеты или комментарии. Нам часто задают вопрос, какой плагин подсветки синтаксиса мы используем на своем сайте. В этой статье мы покажем вам как легко выводить код на своем WordPress сайте.

Первым делом вам необходимо установить и активировать плагин Synatx Highlighter Evolved. После активации переходим в Настройки » Syntax Highlighter для конфигурации плагина.

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

Syntax Highlighter evolved использует простые шорткоды для вывода кода. Для каждого из языков вам необходимо будет обернуть код в соответствующий шорткод.

Для PHP нужно будет сделать вот так:

<br>
&lt;?php<br>
echo “Hello World”;<br>
?&gt;<br>

В записи блога он отобразится вот таким образом:

<?php
echo "Hello World";
?>

Для CSS нужно обернуть код вот так:

<br>
.entry-title {<br>
font-family:”Open Sans”, arial, sans-serif;<br>
font-size:16px;<br>
color:#272727;<br>
}<br>

На сайте он появится в таком виде:

.entry-title {
font-family:"Open Sans", arial, sans-serif;
font-size:16px;
color:#272727;
}

Syntax Highlighter автоматически подсветит код для каждого языка. Также он добавит номера строк и сохранит отступы в разметке кода. Ваши пользователи смогут легко копировать и вставлять сниппеты с вашего сайта.

Как вывести код в WordPress без использования плагина

Многие блоггеры не ведут сайт о разработке, поэтому им не нужно слишком часто добавлять примеры кода в свои записи. А для редких случаев можно вставить код путем превращения его в HTML. Вот так:

>?php echo "Hello World"; ?<

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

Если сконвертировать PHP, HTML, JavaScript в HTML, то можно будет вставить его в свои записи WordPress. Для дополнительного оформления можно обернуть этот код в теги <code> и </code> .

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

По всем вопросам и отзывам просьба писать в комментарии ниже.

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