Как показать тег <div> буквально в <code>/<pre class="prettyprint-override"> tag?

Я использую тег <code> внутри тега <pre>, чтобы показать код в блоге блогера. К сожалению, он не работает с тегами HTML. Есть ли способ показать "<div>" внутри тега <pre> или <code>, фактически не интерпретируя его как HTML? Это то, что я делаю прямо сейчас:

<pre>
 <code>
 .class {        
   color:red;
 }
 // I would like HTML code inside this
 </code>
</pre>

Что работает нормально для всего, кроме HTML. Есть идеи, как это сделать? Спасибо.

Ответ 1

К сожалению, он не работает с тегами HTML.

<code> означает "Это код", <pre> означает "Значительное значение имеет пробел в этой разметке". Ни один из них не означает, что "Содержание этого элемента не должно рассматриваться как HTML", поэтому обе работают отлично, даже если они не означают, что вы хотите, чтобы они имели в виду.

Есть ли способ показать "<div>" внутри тега <pre> или <code>, фактически не интерпретируя его как HTML?

Если вы хотите отобразить символ <, используйте <, с > для > и & для &.

Вы не можете (в современном HTML) писать разметку и интерпретировать ее как текст.

Ответ 2

Кажется, что текстовое поле readonly делает в значительной степени то, что вы хотите.

<textarea readonly> <!-- html code --> </textarea>

Ответ 3

Вы можете использовать элемент "xmp". <xmp></xmp> находится в HTML с самого начала и поддерживается всеми браузерами. Даже он не должен использоваться, он широко поддерживается.

Все внутри <xmp></xmp> берется как есть (там не обнаружены метки разметки lke или ссылки на символы), за исключением, по всей видимости, конечного тега самого элемента.

В противном случае "xmp" отображается как "pre".

Ответ 4

Try:

<xmp></xmp>

для примера:

<pre>
     <xmp><!-- your html code --></xmp>
</pre>

до свидания

Ответ 5

Просто избегайте HTML-тегов. Например -

Замените < на <

Замените на >

Полный поиск здесь

Ответ 6

Попробуйте CodeMirror (https://codemirror.net/)

Это легкая библиотека, которая стилирует код в HTML. Вот скриншот того, что я имею в виду:

Хорошо работает для нас!

Ответ 7

Да, с функцией escape xml. Вам нужно будет включить jQuery, чтобы он работал.

<pre>
  ${fn:escapeXml('
    <!-- all your code -->
  ')};
</pre>