[Программный код] Разметка страницы на STEEM

kito-boy Креветки

в помощь

Сегодняшняя статья будет не большой, но очень полезной для начинающих блоггеров, речь пойдет о том как сделать статью более информативной и приятной глазу посетителя без использования Markdown. Совсем недавно, собираясь написать статью для STEEM меня заинтересовал способ вставки программного кода в текст статьи. Каждый из Вас в каком нибудь обучающем посте конечно встречал такой блок:

Пример

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

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

Представляю вашему вниманию плагин Wp-syntax. Плагин который предназначен для вставки и подсветки различных программных кодов (HTML, PHP, JavaScript) в тело Вашей статьи. Установка плагина ничем не отличается от всех остальных, после установки активируем и можем пользоваться. Для этого в том месте статьи, где Вы хотите видеть выделенный блок кода, необходимо вставить такую строку:

<pre lang="language" line="1"> программный код</pre>

Получим:

 программный код

Все элементарно, но согласитесь, не удобно! Что бы еще более упростить эту задачу устанавливаем плагин WP-Syntax Button Это расширение вставляет в визуальный редактор кнопку code.

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

Вот и все, элементарно! теперь вы знаете как вставить блок программного кода в тело статьи. Это не единственные в своем роде плагины вставки кода, как альтернативу можно использовать SyntaxHighlighter Evolved или CodeCitation, это может понадобиться в случае если выше перечисленные плагины не совместимы с Вашей версией WordPress.