Есть ли способ HTML/CSS для отображения тегов HTML без разбора?

Есть ли способ показать HTML-теги без разбора? Теги, подобные XMP, работали до совершенства, но теперь он заменен на PRE, что не так круто. Взгляните на этот пример:

//This used to NOT PARSE HTML even if you used standard < and >.
<XMP>
<a hred="http://example.com">Link</a>
</XMP>

//New PRE tag requires &lt; and &gt; as replacement for < and >.
<PRE>
&#60;a href="#" onclick="location.href='http://example.com'; return false;"&#62;Link&#60;/A&#62;
</PRE>

То, что я ищу, эквивалентно старому тегу XMP. Новый тег PRE будет анализировать код.

Ответ 1

Вы можете использовать элемент script со своим type, установленным для обозначения обычного текста, и установите для его свойства display значение block. Это влияет только на поведение синтаксического анализа: не распознается разметка (теги или сущность или ссылки на символы), за исключением конечного тега самого элемента </script>. (Таким образом, это не совсем то же самое, что xmp, где признанный тег </xmp>.) Вы можете отдельно обрабатывать белый пробел, аналогичный методу xmp и pre, и/или задавать шрифт моношириной как в этих элементах по умолчанию.

Пример:

<style>
    script {
        display: block;
    }
</style>

Затем внутри тела документа:

<script type="text/plain">
    <i>&eacute;</i>
</script>

Протестировано в новейших версиях IE, Chrome, Firefox, Opera. Не работал в IE 8 и IE 7 эмуляции на IE 9, но, вероятно, это ошибка в эмуляции.

Однако я не понимаю, почему вы использовали бы это вместо xmp, который не переставал работать. Его не в спецификации, но если вы беспокоитесь об этом, вы должны были всегда волноваться. Упомянутая в HTML 2.0 (первая спецификация HTML когда-либо) была предотвращена, она устарела в HTML 3.2 и полностью удалена в HTML 4.0 (давно: в 1997 году).

xmp делает возвращение, а не умирает. W3C HTML5 (характеризуется как текущая спецификация HTML сотрудниками W3C) объявляет xmp устаревшим и несоответствующим, но также устанавливает требование в браузерах: "Пользовательские агенты должны обрабатывать элементы xmp способом, эквивалентным элементам pre, в терминах семантики и для целей рендеринга. (У парсера есть особое поведение для этого элемента.)" Старое поведение синтаксического анализа поэтому явно не требуется, но явно подразумевается.

Ответ 2

Эй, ребята, я лично думаю, что использование тегов <code> </code> работает только в Dream Weaver и тег <xmp> </xmp> никогда не прекращал работать, если вы не введете </xmp>, он отлично работает. Использование <textarea> </textarea> делает так, что другие могут редактировать ваш код на веб-сайте или на странице, поэтому я рекомендую использовать тег <xmp> </xmp> и что этот тег все еще работает.

Ответ 3

Нет.

В теории вы можете использовать блок CDATA, но ни один браузер не поддерживает это в режиме text/html.

Используйте ссылки на символы.

Ответ 4

Если вы хотите быть более сложным, другим способом является создание пользовательского тега с помощью jQuery. В этом примере я использовал <noparse>.

$('noparse').each(function(){
    if($(this).attr('tagchecked') != 'true'){ //checks if already changed tag
        $(this).text($(this).html()).attr('tagchecked', 'true'); //makes the html into plaintext
    }
});

JSFiddle здесь

Ответ 5

Современный способ - использовать textarea с (логическим) атрибутом readonly. Вы можете использовать XMP, но это устарело, поэтому оно может перестать поддерживаться.
Пример:

<textarea readonly='true'>
    <p>This is some text</p>
</textarea>

Ответ 6

Я предлагаю использовать тег iframe html и поместить текст, который вам нравится отображать в атрибуте src. вам нужно только сначала указать url или base64.

example (urlencoded):
<iframe src="data:text/plain,%22%3Chello%3E%22"></iframe>

example (base64):
<iframe src="data:text/plain;base64,IjxoZWxsbz4i"></iframe>

Result displayed as:
"<hello>"

Ответ 7

Технически вы можете использовать <textarea>, но для кода, который вы пытаетесь показать, не должно быть тега </textarea>. Намного легче избежать <.

Ответ 8

Ну, одним из способов было бы использовать jQuery. метод jQuery.text() будет кодировать специальные символы. И исходный некодированный текст останется, если вы просмотрите источник.

<div id="text">
    <a href="">This is an anchor</a>
</div>

<script>
    var t = $('#text'); t.html(t.text());
</script>