如何在<code>/<pre> tag?</pre></code> </div>中按字面显示<div>标记

Question

我在<code>标记内使用<pre>标记在我的博客博客上显示代码。不幸的是，它不适用于HTML标记。有没有办法在<div>或<pre>标记内显示“<code>”而不将其实际解释为HTML？这就是我现在所做的：

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

除了HTML之外的所有内容都适用。知道怎么做到这一点？感谢。

Answer 1

  

不幸的是，它不适用于HTML标记。

<code>表示“这是代码”，<pre>表示“此标记中的空格很重要”。两者都不意味着“这个元素的内容不应该被视为HTML”，所以两者都能完美地工作，即使它们并不意味着你想要的意思。

  

有没有办法在<div>或<pre>标记内显示“<code>”而不将其实际解释为HTML？

如果您要呈现<字符，请使用<，> >和& &。

您不能（在现代HTML中）编写标记并将其解释为文本。

Answer 2

看起来像一个只读textarea几乎可以做你想要的。

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

Answer 3

您可以使用“xmp”元素。 <xmp></xmp>从一开始就是HTML格式，并且得到所有浏览器的支持。即使它不应该被使用，它也得到广泛的支持。

<xmp></xmp>内的所有内容都按照原样（在那里没有识别标记lke标签或字符引用），除非出于明显的原因，否则元素本身的结束标记。

否则“xmp”呈现为“pre”。

Answer 4

尝试：

<xmp></xmp>

例如：

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

再见

Answer 5

只是转义HTML标记。例如 -

将＆lt; 替换为>

将＆gt; 替换为{ "customer" : { "aliases" : { }, "mappings" : { "customer" : { "properties" : { "addresses" : { "type" : "nested", "include_in_parent" : true, "properties" : { "address1" : { "type" : "string" }, "address2" : { "type" : "string" }, "address3" : { "type" : "string" }, "country" : { "type" : "string" }, "id" : { "type" : "string" }, "latitude" : { "type" : "double" }, "longitude" : { "type" : "double" }, "postcode" : { "type" : "string" }, "state" : { "type" : "string" }, "town" : { "type" : "string" }, "unit" : { "type" : "string" } } }, "companyNumber" : { "type" : "string" }, "contactMethods" : { "type" : "nested", "include_in_parent" : true, "properties" : { "type" : { "type" : "string" }, "description" : { "type" : "string" }, "value" : { "type" : "string" } } }, "contacts" : { "properties" : { "contactType" : { "type" : "string" }, "detail" : { "type" : "string" } } }, "id" : { "type" : "string", "index" : "not_analyzed" }, "name" : { "type" : "string" }, "parent" : { "type" : "nested", "include_in_parent" : true, "properties" : { "id" : { "type" : "string" }, "name" : { "type" : "string" }, "type" : { "type" : "string" } } }, "status" : { "type" : "string" }, "timeCreated" : { "type" : "date", "format" : "strict_date_optional_time||epoch_millis" }, "timeUpdated" : { "type" : "date", "format" : "strict_date_optional_time||epoch_millis" }, "type" : { "type" : "string" } } } } } }

完成查询here

Answer 6

只需使用一些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>

Answer 7

尝试CodeMirror（https://codemirror.net/）

它是一个轻量级库，可以用HTML格式化代码。这是我所指的屏幕截图：

为我们工作得很好！

Answer 8

使用此：

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

Answer 9

也许不是最佳答案，但是您可以执行以下操作：

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

Answer 10

是的，带有转义xml函数。你需要启用jQuery才能工作。

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