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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример.

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

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

Получите отображение кода в симпатичной рамочке, ширину которой редактируйте, изменяя параметр width, высоту – height.
Но дело в том, что коды с использованием тега <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 код на странице поста, используя теги или плагины. А какой способ используете вы, было бы интересно узнать.