Показать HTML-код в HTML

Question

Есть ли способ показать фрагменты кода HTML на веб-странице без необходимости замены каждого < на < и > на >?

Другими словами, есть ли некоторыетег для не отображать HTML, пока вы не нажмете на закрывающий тег ?

Answer 1

Оборачивая ваш код в contenteditable div и устанавливая отступ white-space: pre-wrap;, код оборачивается соответственно ширине и высоте:

<div class="code" contenteditable>
  // code
</div>


.code {
  white-space: pre-wrap;
}

Answer 2

Это может не работать в каждой ситуации, но размещение фрагментов кода внутри textarea отобразит их как код.

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

Answer 3

 //To show xml tags in table columns you will have to encode the tags first

function htmlEncode(value) {
    //create a in-memory div, set it's inner text(which jQuery automatically encodes)
    //then grab the encoded contents back out.  The div never exists on the page.
    return $('<div/>').text(value).html();
}

html = htmlEncode(html)