为什么表格单元格内的预标签中的代码看起来很糟糕？

Question

我尝试使用html来自己快速引用不同的编程语言，在参考文献中我试图将代码片段放在一个单元格标记内的预标记内。

首先，这样的HTML，代码看起来很糟糕

                <td>
                    <pre><code>if (..){

                    } else {

                    }</code></pre>
                </td>

然后，我通过删除pre代码

中的所有缩进来解决问题

                    <td>
<pre><code>if (..) {

} else {

}</code></pre>
                    </td>

这张图显示了不同之处，第一个单元格写的是美丽的缩进html，而其他单元格则是由丑陋的缩进html编写的。我不明白原因，有没有办法解决这个问题？

Answer 1

pre元素完全按照HTML源代码中的内容保留空格（包括空格和换行符）。这完全解释了会发生什么。在您的第一个代码段中，例如第三行在文本} else {之前有大量空格，这些空格将被保留。 pre元素中的第一行没有前导空格，因为该行在开始标记<pre>之后开始。