前代码 html 渲染而不是显示文本

Question

我想显示一些文档的代码。但每当我尝试时，浏览器实际上将其呈现为 HTML 而不是文本。

我该如何阻止它？

<pre>
  <code class="html">
    <div class="alert-wrap g--5">
      <input type="checkbox" id="alert-check">
      <label for="alert-check">CLOSE</label>
      <div class="alert card">
        <p>Surface rules! That is all.</p>
      </div>
    </div>
  </code>
</pre>

Answer 1

您可以对 HTML 进行编码以避免将其解释为 HTML...

<pre>
  <code class="html">
    &lt;div class="alert-wrap g--5"&gt;
      &lt;input type="checkbox" id="alert-check"&gt;
      &lt;label for="alert-check"&gt;CLOSE&lt;/label&gt;
      &lt;div class="alert card"&gt;
        &lt;p&gt;Surface rules! That is all.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code>
</pre>

Answer 2

您可以使用在线转换器。

&lt;pre&gt;
  &lt;code class=&quot;html&quot;&gt;
    &lt;div class=&quot;alert-wrap g--5&quot;&gt;
      &lt;input type=&quot;checkbox&quot; id=&quot;alert-check&quot;&gt;
      &lt;label for=&quot;alert-check&quot;&gt;CLOSE&lt;/label&gt;
      &lt;div class=&quot;alert card&quot;&gt;
        &lt;p&gt;Surface rules! That is all.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/code&gt;
&lt;/pre&gt;

在线转换器

http://www.accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php

前代码 html 渲染而不是显示文本

Pre code html rendering rather than displaying text

html

pre