使用 Pre 在文章中显示代码块

Question

作为技术博客，难免会在文章中插入一部分代码块，代码具有一定的格式，所以很自然就会使用 <pre> 标签，其在使用上与 <div> 等其他标签没有太大区别，但由于其会保留标签中所有的空白与换行，因此在使用时还是有几个地方是需要注意的。

Pre标签

<pre> 标签通常用于展示预格式化的文本，默认使用等宽字体，并且保留所有的空白和换行，效果如下所示：

清明
朝代：唐代
作者：杜牧
清明时节雨纷纷，路上行人欲断魂。
借问酒家何处有，牧童遥指杏花村。

通过查看样式可以发现，Chrome 中 <pre> 的默认样式为：

pre {
    display: block;
    font-family: monospace;
    white-space: pre;
}

Monospace 也称为 fixed-width font（等宽字体，例如 Courier 和 Monaco），即每个字符所占据的水平空间是一样的，很适合用于展示代码片段。white-space 属性则声明了如何处理元素内的空白，值 <pre> 会保留元素内的空白（一般 HTML 中的连续空白会当成一个空格来处理），通过上述 pre 标签的展示，能很清楚的看出 pre 展示内容的特点。当然 <pre> 标签的字体等都是可以自己通过 CSS 来覆盖的。

使用Pre标签

pre 在使用时与 div 等元素没有太大区别，一般 pre 的场景是展示代码，这种情况下，需要对文本代码中的 <、>等字符实体进行转义，如下图所示。

如果没有进行转义，否则会被解析成 HTML 元素（pre 内的 <code> 标签主要是起一个语义化的作用）：

前面说到，pre 标签特有的性质是保留了所有的空白和换行，因此在使用时要特别注意如下几点。

文本溢出

默认情况下，pre 中的文本的展示如同其在源代码中的样子，因此第一个问题便是，如果文本的长度超过了 pre 的宽度，展示时不会自动换行而是会溢出，如下图所示：

若要自动换行，则需要加上 white-space 属性，即 white-space: pre-wrap;。white-space 属性设置了如何处理元素内的空白，pre-wrap 表示保留空白符序列，但是正常地进行换行，效果如下图所示：

字符空白

• 为什么需要这么一个 white-space 属性？
• 为什么在网页中显示多个空格通常要转义成多个  ？

实际上，网页的显示是对空白、换行做了特殊处理的，即对空白、换行进行了合并，因此在我们平常书写带缩进的代码时，感受不到这点。但是，假如我们对 body 元素设置 white-space: pre (保留空白)，那网页的样式将难以控制，如下图所示:

在 pre 中，由于保留了所有的空白，因此要额外注意前后的空白和换行。例如我们输出的某个格式化的源代码和其在网页中的效果如下图所示：

这样子达不到我们所预期的效果，因此在输出 HTML 时，要特别注意额外的空白与换行，正确的姿势如下，也就是说不要有额外的空白与换行：

当然，如果想要让 pre 的表现与 div 相似，则可以使用 white-space: pre-line;，表示合并空白符序列，也就是源代码中的多个空格，在展示时只作为一个空格，但是保留换行符。

Pre里面不能有块元素

还有一点需要注意的是，不要将可以导致段落断开的标签，例如 <h1>、<p>、<address> 标签放在 <pre> 所定义的块里，否则会产生多余的换行，如下图所示：

不过万一真遇到了这种过不去的坎，可以给 p 加上 display: inline;，就能去掉多余的换行：