Як показати тег <div> буквально в тегу <code> / <pre>?

Я використовую <code>тег всередині <pre>тегу, щоб показати код у своєму блозі блоґерів. На жаль, це не працює з тегами HTML. Чи є спосіб показати " <div>" всередині <pre>або <code>тег, фактично не інтерпретуючи це як HTML? Це те, що я роблю зараз:

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

Що працює нормально для всього, крім HTML. Будь-яка ідея, як цього досягти? Дякую.

На жаль, це не працює з тегами HTML.

<code>означає "Це код", <pre>означає "Пробіл у цій розмітці є значним". Ні те, ні інше не означає "Зміст цього елемента не слід розглядати як HTML", тому обидва працюють ідеально, навіть якщо вони означають не те, що ви хочете, щоб вони означали.

Чи є спосіб показати " <div>" всередині <pre>або <code>тег, фактично не інтерпретуючи це як HTML?

Якщо ви хочете відтворити <символ, використовуйте <, >для для >та &для &.

Ви не можете (у сучасному HTML) писати розмітку, і її слід інтерпретувати як текст.

Здається, текстова область, що читається, робить майже те, що ви хочете.

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

Ви можете використовувати елемент "xmp". Цей <xmp></xmp>код був у HTML з самого початку і підтримується всіма браузерами. Навіть його не слід використовувати, він широко підтримується.

Все, що <xmp></xmp>знаходиться всередині , сприймається як є (там не розпізнаються теги розмітки lke або посилання на символи), за винятком очевидної причини, кінцевого тегу самого елемента.

В іншому випадку "xmp" відображається як "pre".

Спробуйте:

<xmp></xmp>

для прикладу:

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

до побачення

Просто уникніть HTML-тегів. Наприклад -

Замінити < на<

Замінити > на>

Повний пошук тут

Цього можна легко досягти за допомогою трохи JavaScript.

document.querySelectorAll("code").forEach(el => el.innerText = el.innerHTML);

Запустіть фрагмент нижче, щоб побачити його в дії:

document.querySelectorAll("code").forEach(el => el.innerText = el.innerHTML);

pre {
  padding: 1rem;
  background-color: #eee;
  border-radius: 0.25rem;
}

<pre>
  <code>
   .class {        
     color:red;
   }
   
   // I would like HTML code inside this
   <h1>Hello this is a heading</h1>
  </code>
</pre>

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

Це полегшена бібліотека, яка стилізує код в HTML. Ось скріншот того, на що я маю на увазі:

Добре працювали для нас!

Можливо, не найкраща відповідь, але ви можете зробити щось подібне:

<p><<input type="hidden">h1<input type="hidden">><input type="hidden">This code is 
displayed!<input type="hidden"><<input type="hidden">/h1<input type="hidden">></p>

<p><<input type="hidden">h1<input type="hidden">><input type="hidden">This code is displayed!<input type="hidden"><<input type="hidden">/h1<input type="hidden">></p>

Використовуй це:

<pre>
   <?= htmlentities($script) ?>
</pre>

Так, із функцією екранування xml. Вам потрібно буде ввімкнути jQuery, щоб він працював.

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