HTML 中的代码格式缩进出现在文档中

Question

这是我从 Anki（抽认卡创建程序）复制并粘贴的 HTML 代码。 该代码工作正常。 （背景：抽认卡是一道编程题）

<meta content="width=window-width, initial-scale=1.0" name="viewport">

What does this code do?<div><div background-attachment:="" background-clip:="" background-image:="" background-origin:="" background-position:="" background-repeat:="" background-size:="" class="highlight" initial;="" initial;"=""><pre style="line-height: 25px;"><table class="highlighttable" style="font-family: Arial;"><tbody><tr><td><div 10px"="" class="linenodiv" padding-right:=""><pre style="line-height: 125%">1</pre></div></td><td class="code"><div class="highlight"><pre style="line-height: 125%">&lt;<span style="color: #008000; font-weight: bold">meta</span> <span style="color: #7D9029">http-equiv</span><span style="color: #666666">=</span><span style="color: #BA2121">"X-UA-Compatible"</span> <span style="color: #7D9029">content</span><span style="color: #666666">=</span><span style="color: #BA2121">"IE=edge"</span>&gt;</pre></div></td></tr></tbody></table></pre></div><div><center><br></center></div></div>

在浏览器上呈现的代码：

显然，此代码在其当前格式下不可读。 为了解决这个问题，我添加了适当的缩进。

<meta content="width=window-width, initial-scale=1.0" name="viewport">

What does this code do?
<div>
  <div background-attachment:="" background-clip:="" background-image:="" background-origin:="" background-position:="" background-repeat:="" background-size:="" class="highlight" initial;="" initial;"="">
    <pre style="line-height: 25px;">
      <table class="highlighttable" style="font-family: Arial;">
        <tbody>
          <tr>
            <td>
              <div 10px"="" class="linenodiv" padding-right:="">
                <pre style="line-height: 125%">1</pre>
              </div>
            </td>
            <td class="code">
              <div class="highlight">
                <pre style="line-height: 125%">&lt;<span style="color: #008000; font-weight: bold">meta</span> <
                  span style="color: #7D9029">http-equiv</span>
                  <span style="color: #666666">=</span>
                  <span style="color: #BA2121">"X-UA-Compatible"</span>
                  <span style="color: #7D9029">content</span>
                  <span style="color: #666666">=</span>
                  <span style="color: #BA2121">"IE=edge"</span>&gt;
                </pre>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </pre>
  </div>
  <div>
    <center>
      <br>
    </center>
  </div>
</div>

奇怪的部分：上面的缩进现在出现在 HTML 文档中。

这不应该发生，对吗？ 我认为用户看不到 HTML 中的换行符？

Answer 1

那是因为whitespace是pre （由浏览器保留）。 这是为了让您可以缩进代码。 通常，当您想在 HTML 中呈现代码时，您可以取消缩进：

            <td class="code">
              <div class="highlight">
                <pre style="line-height: 125%">&lt;<span style="color: #008000; font-weight: bold">meta</span>
<span style="color: #7D9029">http-equiv</span>
<span style="color: #666666">=</span>
<span style="color: #BA2121">"X-UA-Compatible"</span>
<span style="color: #7D9029">content</span>
<span style="color: #666666">=</span>
<span style="color: #BA2121">"IE=edge"</span>&gt;
                </pre>
              </div>
            </td>

请注意，您不需要在<pre>行本身上执行此操作（这就是元部分显示为您想要的缩进的原因）。

如果你要经常使用代码片段，像Prismjs这样的库会让你的生活更轻松，并且值得开销（它实际上是一个非常轻量级的库）：

<pre><code class="language-html">(... html code ...)</code></pre>