Отображение на странице HTML кода с помощью тега XMP

Отображение HTML кода на странице с помощью тега < XMP >

Иногда нужно показать на странице примеры html или css кода, например это понадобилось мне чтобы вам показывать примеры верстки сайтов, или какие-то примеры как например этот. Чтобы отобразить html код я сначала пользовался заменой символов. С заменой символов браузер не обрабатывал код, а показывал его на текст. К примеру чтобы показать код я заменял символы угловых скобок

Пример кода с заменой символов

&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;новый сайт&lt;/title&gt; &lt;/head&gt; &lt;header&gt; &lt;h1&gt;Блог почтальона Печкина&lt;/h1&gt; &lt;h2&gt;Всегда свежие газеты на завтрак&lt;/h2&gt; &lt;/header&gt; ( &lt; &gt; ) на спец код (&lt; заменял на &lt; &gt; заменял на &gt; ) И в браузере данный код отображался вот так

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>новый сайт</title>
</head>
<header>
<h1>Блог почтальона Печкина</h1>
<h2>Всегда свежие газеты на завтрак</h2>
</header>


Правда строки не переносятся и чтобы был перенос строки приходилось еще добавлять <br> В общем довольно муторно было, надо было сначала написать все, а потом в текстовом редакторе (с функцией массовой замены символов) заменить все символы и уже потом размещать в статье.

Тек-же опробовал теги

<code> и <pre> Но они не заработали у меня и код не отображался на странице, а воспринимался браузерами как команды

Пример с тегом < xmp >

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

Пример заключения в тег, внизу где закрывающий тег нужно убрать пробел, я поставил пробел чтобы браузер его отобразил. В этом теге строчки не переносятся и надо для переноса строк использовать тег < br > <xmp> <xmp> <!doctype html> <html> <head> <meta charset="utf-8"/> <title>новый сайт</title> </head> <header> <h1>Блог почтальона Печкина</h1> <h2>Всегда свежие газеты на завтрак</h2> </header> Раньше как я уже упомянул что заменял символы угловых скобок чтобы показать код на странице, но вот с этой статьи как раз начал использовать тег < xmp >. Стало гораздо легче показывать код, но старые страницы переделывать не буду, надеюсь вам помог этот материал.

Этот домен продается здесь: telderi.ru, и еще много других