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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Хочу подбить итог всему сказанному :
    не спешите завязывать отношения с Гуглом, пока не наработаете опыт…
    Да, заработок- первые центы, пойдет
    буквально с первых дней, потому что Гугл не ставит ограничения по статистике посещаемости. Но неопытность, азарт, да и просто людская зависть, от которой вы на первых порах не знаете как защититься, могут сыграть с вами злую шутку — только начав распрямлять крылья, только освоившись и начав понимать особенности работы, вы можете вылететь из системы без всяких разборок и объяснений…Это не смертельно, но очень неприятно :)

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

      Я согласна в Вами, Мила. Многие жалуются, что система их банит без всяких причин.
      Значительно интереснее (и в плане расценок) работать с Яндексом. Будут параметры моего блога соответствовать — попробую туда двинуть

  2. Vinyengence

    Если вам необходим непрерывный доступ к отборной, правдивой и любопытной информации о бизнесе, если вы жаждете знать секретики всемирно популярных местных и европейских акул бизнеса, а также научиться применять эти тайны на практике, если вы хотите быть в курсе новейших бизнес-дел и иметь доступ к выгодным коммерческим предложениям, то наша газета о малом бизнесе — это то, что вы так долго искали. У нас на сайте вы обнаружите эксклюзивный и интересный материал о том, как верно вести бизнес в Интернете и в реальности, вы станете пользоваться проверенными советами, информацией и статьями о том, как безопасно и, самое главное, эффективно организовать развитие бизнес-проектов, как различать выгодные и неприбыльные коммерческие предложения, а также множество другой полезной и эксклюзивной информации. Электронная газета о малом бизнесе «Хроники бизнеса» — минимум информационных отходов и официальности и максимум действительно важной информации.

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

      Vinyengence, Ваш журнал действительно интересен и полезен.

  3. Артем

    Я вот мучался мучался с настройками на сайтах, а потом сделал по этой схеме http : //nmnh.biz/news/zarabotat_na_adsense/2014-02-28-15 , как ни странно но цтр вырос довольно значительно, ну и доход соответственно тоже ))

  4. Сергей

    Все верно. С adsense можно работать но осторожно. Главное не расчитывать только на его объявления.

  5. Zaxvatus

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

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

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