Вывести 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 в обычный текст без преобразования?

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

    Совершенно не терплю разные информационные видеоролики. Уже заранее знаешь, что вместо того, чтобы за 3-5 минут прочитать действительно важную информацию, придется 15-20 минут слушать всякий бред со словами типа «э-э…», вздохами, всякими шумовыми эффектами, а главное, все это можно было бы спокойно пропустить мимо ушей, если бы информации было бы на все 15 минут, а не на 2, как обычно.
    Иногда, начинаешь искать полезную информацию, которая может пригодиться в работе. И тут на тебя сыпятся десятки ссылок на всякие ролики. Один ролик отнимает, в среднем, 15 минут. Если их 5 штук, это уже больше часа. Час выкинутого времени! Когда можно было бы прочитать все это максимум за 20 минут!
    Или смотришь какую-то презентацию… Зачем, объясните мне, оставлять в ролике первые 10 минут, где мужик вещает о том, почему надо всем поставить телефоны на беззвучный режим и куда что записывать. Начинаешь искать с какого места там идет действительно полезная информация. Переводишь на 23 минуту. Только с этого момента проклевывается что-то вроде бы ценное. За 30 минут ролика 4,5 минуты — главная, весьма полезная суть.
    Есть и нормальные полезные ролики. Иногда просто по-хорошему удивляешься: с самой первой секунды ценные вещи, причем в хорошем темпе, без всяких размусоливаний и собственной излишней рекламы.
    Если ролик полезный, не понадобится 10 минут рассказывать, какой ты хороший. Это и по ролику видно. И все про него расскажут другим, и понажимают на все кнопки, и тебе найдут как написать.
    Последний ролик, который я посмотрела — смертельно усталый парень со скоростью 1 слово в полминуты вещает о партнерской программе, а потом еще и говорит о том, как люди в интернете любят смотреть видеоролики.

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

      Такое впечатление, что авторы только-только научились делать видеопрезентации или снимать видео и хотят похвастаться этим перед всем миром.
      Некоторые видео, напротив, сделаны профессионально. Но информация в них жеваная-пережеваная…

  2. Елена Олейникова

    Поначалу было интересно, что это такое — видеоуроки, вебинары и так далее, а теперь мне они и даром не нужны. Если уж очень приспичит, тогда да, посмотрю, послушаю, даже куплю. Но это бывает крайне редко.
    С другой стороны, например, семинары Каширина могу слушать по нескольку раз. Сначала не поняла почему, потом, почитав инфу про автора, дошло — он же педагог по образованию! И умеет рассказывать так, что заслушаешься. Или Алексей Радонец. Парень еще учится, а уже видно, что ему самому очень нравится преподавать, поэтому после его вебинаров расходиться не хотят.
    А все эти эканья-беканья нуворишей от инфобизнеса порой просто бесят. Так что я за книги.

  3. Ольга

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

    Чаще всего людей приглашают в вебинарную комнату, чтобы что-то им продать, даже больше — впарить. Рассказывают в течение часа о чем угодно, о себе, о приписных истинах. Люди уже пишут в комментариях:»Дайте что-то полезное, хватит болтовни».

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

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

  4. Елена

    Я за видео,но только полезное, информативное. Сколько получала видео-конференций в которых более половины времени пиарят свое изображение, принимают поздравления по прошедшему событию и т.д. Мне нравится инструмент симбиоз: es0634.iwowwe.com/
    В нем присутствуют все направления рассылок,видео, конференции,фильмы, шаблоны. Передовые технологии рассылок.

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

      И здесь с Вами соглашусь. Если видео — то только полезное, по-существу, конкретное, без которого текстом не донести материал до пользователя.

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

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