Как показать исходный код HTML на странице HTML

Question

Я хочу отобразить html-код в html, я пробовал решение от самого SO, но это не помогло или, может быть, я что-то упустил. Затем я попробовал следующий синтаксис, но безрезультатно (только получая Click Here, чтобы применить).

<pre><code><span style='font-size:20px'>Click Here to Apply </span></code></pre>

Кто-нибудь поможет мне выяснить, что не так в моем подходе?

Answer 1

Ответ Томера правильный, и я так и поступлю. Но есть альтернатива, которая использует JavaScript. Вы можете удалить HTML-элемент и добавить его обратно как текст, используя createTextNode(), Передайте элемент этой функции:

function revealElementHTML(el) {
    var html = el.innerHTML;
    el.innerHTML = "";
    el.appendChild(document.createTextNode(html));
}

http://jsfiddle.net/rh7RW/

Answer 2

Вы должны заменить все символы "<" на < и все '>' с >

Обратите внимание, что это не обеспечит раскраску кода, если это то, что вы ищете.

Answer 3

Раньше был xmp тег для поддержки этого - этот тег теперь устарел, но все еще поддерживается всеми основными браузерами.

Вы можете использовать его, если больше ничего не соответствует вашим потребностям.

<pre><xmp><span style='font-size:20px'>Click Here to Apply </span></xmp></pre>

Answer 4

Если вам нужны цветные фрагменты, jQuery.snippest предлагает хороший инструмент для раскрашивания.

http://www.steamdev.com/snippet/

Answer 5

Вы должны использовать символы ascii, чтобы показать свой код, или вы должны использовать javascript, как в ответе gilly3.

Вы можете конвертировать свой HTML-код онлайн.

Если вы используете php, используйте htmlentities.

наконец, вы можете использовать следующую CSS для стилизации.

pre {
 white-space: pre-wrap; /* css-3 */
 white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
 white-space: -pre-wrap; /* Opera 4-6 */
 white-space: -o-pre-wrap; /* Opera 7 */
 word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Answer 6

Я попробовал их все, предварительный код / ​​код на самом деле не является решением, но у нас есть еще 3 простых решения

1. textarea

<textarea name="tex" id="texa" cols="30" rows="10"class="one textarea">
        here is ok, mama? <a href="#">aoeueouoe</a> 

</textarea>

texa.value+='<br>\n\n'+i; 

2. xmp

<xmp>
    keyi1xiedaimama? <a href="#">aoeueouoe</a>      
</xmp>

3. createTextNode

info.appendChild(document.createTextNode(texa.value));