Làm cách nào để hiển thị thẻ <div> theo đúng nghĩa đen trong thẻ <code> / <pre>?

Tôi đang sử dụng <code>thẻ bên trong <pre>thẻ để hiển thị mã trên blog blogger của mình. Thật không may, nó không hoạt động với các thẻ HTML. Có cách nào để hiển thị " <div>" bên trong của <pre>hoặc <code>thẻ mà không thực sự hiểu nó là HTML không? Đây là những gì tôi làm ngay bây giờ:

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

Cái nào hoạt động tốt cho mọi thứ ngoại trừ HTML. Bất kỳ ý tưởng làm thế nào để đạt được điều này? Cảm ơn.

Thật không may, nó không hoạt động với các thẻ HTML.

<code>có nghĩa là "Đây là mã", <pre>có nghĩa là "Khoảng trắng trong đánh dấu này là đáng kể". Không có nghĩa là "Nội dung của phần tử này không nên được coi là HTML", vì vậy cả hai đều hoạt động hoàn hảo, ngay cả khi chúng không có nghĩa là những gì bạn muốn.

Có cách nào để hiển thị " <div>" bên trong của <pre>hoặc <code>thẻ mà không thực sự hiểu nó là HTML không?

Nếu bạn muốn hiển thị một <ký tự thì hãy sử dụng <, với >for >và &for &.

Bạn không thể (trong HTML hiện đại) viết đánh dấu và để nó được hiểu là văn bản.

Có vẻ như một văn bản chỉ đọc làm được khá nhiều điều bạn muốn.

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

Bạn có thể sử dụng phần tử "xmp". Các<xmp></xmp> đã được trong HTML ngay từ đầu và được hỗ trợ bởi tất cả các trình duyệt. Thậm chí nó không nên được sử dụng, nó được hỗ trợ rộng rãi.

Mọi thứ bên trong <xmp></xmp>đều được giữ nguyên như vậy (không có thẻ lke đánh dấu hoặc tham chiếu ký tự nào được nhận dạng ở đó) ngoại trừ, vì lý do rõ ràng, thẻ kết thúc của chính phần tử đó.

Nếu không, "xmp" được hiển thị giống như "pre".

Thử:

<xmp></xmp>

ví dụ như:

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

tạm biệt

Chỉ cần thoát khỏi các thẻ HTML. Ví dụ -

Thay thế < bằng<

Thay thế > bằng>

Toàn bộ tra cứu tại đây

Điều này có thể dễ dàng đạt được với một chút javascript.

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

Chạy đoạn mã dưới đây để xem nó hoạt động:

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>

Hãy thử CodeMirror ( https://codemirror.net/ )

Đó là một thư viện nhẹ tạo kiểu mã trong HTML. Đây là ảnh chụp màn hình của những gì tôi đang đề cập đến:

Làm việc tốt cho chúng tôi!

Có thể không phải là câu trả lời hay nhất, nhưng bạn có thể làm như sau:

<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>

Dùng cái này:

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

Có, với một hàm thoát xml. Tuy nhiên, bạn sẽ cần phải bật jQuery để nó hoạt động.

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