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

код html как текстДобрый день, начинающие вебмастера. Вы пишете о создании и продвижении блогов? На определенном этапе развития своего проекта вы обязательно захотите поделиться с читателями какими-то полезными сведениями. К примеру, выложите на страницу html код или скрипт (пусть даже и чужой).

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

Проблемы-то возникают у многих, поэтому подобная информация востребована.

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

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

Совсем недавно для корректного вывода тегов на странице предлагалось вручную заменять знаки < и > на спецсимволы &lt; и &gt;.

Сегодня движок WordPress чаще всего умеет сам делать такие преобразования, но также добавляет много мусора, перековеркивает, обрезает код, делает его нечитаемым или некопируемым (было в моей теме).

не копируется html код

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

СТАТЬИ ПО ТЕМЕ:

Wordpress, как вывести записи в две колонки

Плагин Мемберлюес (Memberlux) для автоматизации интернет бизнеса

Плагин WP Super Cache для снижения нагрузки и ускорения блога

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

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

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

В ВИЗУАЛЬНОМ РЕДАКТОРЕ пропишите код.

Перейдите в HTML РЕЖИМ, добавьте открывающий и закрывающий тег <pre>. В моей теме уже автоматически знаки <  > преобразовались в спецсимволы &lt; и &gt;.

СОХРАНИТЕ. В визуальный режим больше НЕ переключайтесь, иначе изменения пропадут.

При отображении СОХРАНЯЮТСЯ все пробелы. В моем шаблоне получился следующий результат (у вас отображение может быть другим). использование тега pre, отобразить html код как текст, отображение тега pre

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

Тег <code> также позволяет вывести одну или несколько строк программного кода. Пробелы и переносы НЕ УЧИТЫВАЮТСЯ, переносите строки тегами <p> или <br>.

Делайте все аналогично вставке тега <pre>. отображение тега code. показать html код, использование тега 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> считаются НЕВАЛИДНЫМИ. Учебник HTML предлагает вставлять этот тег только в таком виде.

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

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

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

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

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

Так же работают и другие плагины.

  • Better WordPress Syntax
  • Wp-highlight.js
  • SyntaxHighlighter
  • Auto SyntaxHighlighter (у меня). И многие другие плагины.

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

Заключение

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

Понравилась статья? Поделиться с друзьями:
Я новичок
Комментариев: 9
  1. Анна

    Долго искала в интернете эту тему. Очень сложно найти. Ваша статья реально помогла. Спасибо

    1. Ольга (автор)

      Я тоже очень долго искала. Подумала, что у других блогеров такая же проблема. И написала статью.

  2. Гульнара

    Спасибо автору за интересные и полезные статьи! Оказывается, делала перелинковку у себя на сайте не совсем правильно. Буду исправлять и обращаться к вам. У вас, коллеги, мне еще учиться и учиться :)

  3. artem

    WP-Syntax и wp-syntax button много лет не обновляются и сегодня они в конфликте с новой версией вордпресс. по крайне мере у меня они напрочь отказались работать под каким бы то ни было соусом.

    1. Ольга (автор)

      С моей темой они тоже не работают. Я много плагинов перепробовала, остановилась на Auto SyntaxHighlighter.

  4. Сергей

    Здравствуйте.
    Установил плагин Auto SyntaxHighlighter, но как сделать вертикальный и горизонтальный скролинг не знаю. Помогите, пожалуйста.

    1. Ольга (автор)

      Плагин не требует никаких добавочных настроек. В панели Записей появляется карандашик, нажимаете его и выбираете язык, в окошко вставляете код. Я обычно выбираю php. У меня появляется горизонтальная прокрутка.

  5. Сайт

    У меня на сайте после редактирования статей часть кода пропадает.

    1. Ольга (автор)

      У Вас Вордпресс, Вы выводите код без плагина? Это особенности работы движка. Пользуйтесь плагином.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: