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>