Подсветка кода на сайте WordPress. Как вывести HTML код на странице

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

Плейлист «Как создать сайт на WordPress»

TimeWeb лучший хостинг для WordPress: домен в подарок, 99 рублей в месяц.
Попробуйте, 10 дней бесплатно: РЕГИСТРАЦИЯ ОБЗОР ВИДЕО

Что я имею в виду под словосочетанием «чтобы код правильно отображался»? HTML коды обычно вставляют через текстовый редактор, и при переходе в визуальный редактор часть кода может пропасть. Так устроен визуальный редактор, он автоматически редактируют код, убирая, по его мнению, не нужные фрагменты.

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

Как избежать проблем с отображением HTML кодов на сайте? Ответ очевидный, установка специализированного плагина WordPress решит все проблемы. Сейчас я расскажу вам про два плагина, которые отлично выводят код на страницах сайта. Вы же выберете тот, который подходит именно под ваши задачи.

Плагин Enlighter — Customizable Syntax Highlighter. Для установки плагина перейдите в административную панель «WordPress» ⇒ «Плагины» ⇒ «Добавить новый» и в форме поиска вбейте «Enlighter — Customizable Syntax Highlighter». Затем нажмите установить и активировать.

После этого в админке WordPress появится панель настроек плагина, но там, в принципе ничего настраивать не нужно.

На панели инструментов визуального редактора появилась специальная кнопка, нажав на которую, откроется окно для вставки кода: Чтобы вставить код, нужно выбрать «Language», который зависит от типа кода (HTML, CSS, Java и так далее). В поле «Sourcecode» вставить код и нажать «Ok»: Вот так код будет выглядеть на сайте:

<div class="row">
<span class="header"></span>
<nav class="horizontal-nav center-nav">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Все статьи</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
</div>

Я пользуюсь этим плагином. Возможно, отображение кода не такое красивое, как у других плагинов, но Enlighter обладает уникальными функциями, которых нет у других плагинов. Все дело в том, что на моем блоге запрещено копирование текста специальной командой, во избежание воровства контента. Естественно, если в статье есть код, но скопировать его нельзя, статья, по сути, бесполезна. Плагин Enlighter позволяет открыть код в новом окне, откуда без проблем можно его скопировать. Получается, копирование запрещено, но на код это не распространяется. Нажмите на плюсик в правом верхнем углу, в новом окне откроется страница с кодом: Плагин Auto SyntaxHighlighter. Для установки плагина перейдите в административную панель «WordPress» ⇒ «Плагины» ⇒ «Добавить новый» и в форме поиска вбейте «Auto SyntaxHighlighter». Затем нажмите установить и активировать.

Плагин не нужно настраивать. После установки на панели инструментов визуального редактора появится кнопка в виде карандаша, нажав на которую, откроется окно для вставки кода: Выбираем «The code language» в зависимости от типа кода, вставляем его в специальное поле и нажимаем «Ok»: Вот так код отображается на блоге:

<div class="row">
<span class="header"></span>
<nav class="horizontal-nav center-nav">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Все статьи</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
</div>

Отображается намного лучше, чем через плагин Enlighter!

Какой плагин использовать, решать только вам. Я бы использовал Auto SyntaxHighlighter, если бы на сайте не было запрещено копирование. Но в моем случае использование плагина Enlighter более уместно.

Надеюсь, эта статья поможет вам корректно вывести HTML коды на страницах сайта. Есть вопросы, задавайте в комментариях под статьей. Всем удачи!

Опубликовано в Как создать сайт. Пошаговая инструкция
Советую посетить следующие страницы:
✓ 27 необходимых плагинов для WordPress
✓ Как сделать меню в html и css
✓ Как создать подвал (футер) WordPress в html и css
✓ Фавикон для сайта как сделать и как установить
✓ Плагин WP Super Cache. Ускоренная загрузка сайта