html - 预编码 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>