Если вы пишете о создании и продвижении блогов, то на определенном этапе развития своего проекта обязательно захотите поделиться с читателями какими-то полезными сведениями, например, html кодом или скриптом (пусть даже и чужим).

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

Итак, вы хотите дать читателям скопировать скрипт или html код, размещаете его в тело поста. Не тут-то было.

Совсем недавно для корректного вывода тегов на странице предлагалось вручную заменять знаки < и > на спецсимволы &lt; и &gt;. Сегодня движок WordPress чаще всего умеет сам делать такие преобразования, но также добавляет много мусора, перековеркивает, обрезает код, делает его нечитаемым или некопируемым (было в моей теме).

отобразить html код на странице

 

На самом деле способов красиво оформить html код, вставить его в пост с подсветкой синтаксиса несколько - без плагина и с применением wordpress плагинов для кода.

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

Показать html код на странице как текст. Тег <pre>

Показать html код на странице как текст, подсветить его помогают теги <pre>.

В визуальном редакторе пропишите код, перейдите в html режим и добавьте открывающий и закрывающий тег <pre>. В моей теме уже автоматически скобки < и > преобразовались в спецсимволы &lt; и &gt;. Сохраните. В визуальный режим больше не переключайтесь, иначе изменения пропадут.

При отображении сохраняются все пробелы. В моем шаблоне получаем следующий результат (у вас отображение может быть другим).

Подробнее о правильном выведении кода смотрите в учебнике HTML.

использование тега pre

отобразить html код как текст, отображение тега pre

Как вывести html код на странице поста как текст. Тег <code>

Тег <code> также позволяет вывести одну или несколько строк программного кода. Пробелы и переносы не учитываются, поэтому для создания переносов следует использовать <p> или <br>. Делайте все аналогично вставке тега <pre>.

Пример.

показать html код, использование тега code

 А вот что получилось.

отображение тега code

Отобразить html код на странице как текст. Тег<xmp>

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

<div style="overflow: auto; height: 80px; width: 450px; padding: 8px; border: 1px solid #ccc;">
<xmp>
ВСТАВИТЬ СЮДА ВАШ КОД
</xmp>
</div>

Вывести html код на странице, использование тега xmp

Получите отображение кода в симпатичной рамочке, ширину которой редактируйте, изменяя параметр width, высоту - height.
использование тега xmpНо дело в том, что коды с использованием тега <xmp> считаются невалидными. Поэтому в учебнике HTML предлагают использовать этот тег только в таком виде.

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

Но большинство блогеров для красивого и неизменного отображения html кодов на странице поста применяют плагины для WordPress. Опять таки, плагинов множество, но у меня корректно заработал лишь один.

Привожу список, а вы подбираете плагин, работающий с вашим шаблоном.

1. сладкая парочка - WP-Syntax – выделяет код рамочкой, дает возможность подсветить синтаксис. Плюс wp-syntax button – выводит кнопку в админпанель блога, предоставляет возможность вставить html код или скрипт в специальное окно. Недостаток – все действия производятся в html режиме, переключаться в визуальный режим нельзя, иначе все изменения исчезнут.

2. Syntax Highlighter Compress - в админпанель выводится дополнительная кнопка. Нажимаете ее, открывается окно, куда можно ввести код и выбрать язык программирования. Так же работают и другие плагины.

3. Better WordPress Syntax

4. wp-highlight.js

5. SyntaxHighlighter

6. Auto SyntaxHighlighter (его использую я). И многие другие плагины.

Мне пришлось устанавливать и активировать все по-очереди, пока не нашла тот, который работает в моем шаблоне.

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