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

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

发布于 2017-04-15 字数 5636 浏览 4560 评论 0

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

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

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 的场景是展示代码,这种情况下,需要对文本代码中的 <、>等字符实体进行转义,如下图所示。

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

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

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

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

文本溢出

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

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

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

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

字符空白

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

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

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

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

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

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

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

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

Pre里面不能有块元素

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

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

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

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

佚名

文章 0 评论 0

cs163v

文章 0 评论 0

Mr Rock

文章 0 评论 0