这样的标签显然会被浏览器解析,   译文出处

作者: 前端  发布:2019-11-05

考虑 <pre> 标签的样式

2016/06/02 · CSS · 标签

原文出处: Chris Coyier   译文出处:众成翻译   

你可能正在使用 <pre> 标签。这是一个 HTML 中非常特别的标签,它允许其中的空格真正显示出来。例如:四个空格将真实显示成四个空格。这不同于其他标签通常的做法,其他标签会将之间的空白压缩成一个。从这一点来说,<pre>标签真的是很有用。

这篇文章里面放的大都是我自己写程序的时候遇到的一些小问题,其实都是自己没有掌握的点,别人看起来应该很简单啦,但写下来能提醒自己,也能鼓励一下自己,这条路也不好走哇。

< pre>

  • < pre> 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
    < pre> 标签的一个常见应用就是用来表示计算机的源代码。
    可以导致段落断开的标签(例如标题、< p> 和 <address> 标签)绝不能包含在 < pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的。
    < pre >元素中允许的文本可以包括物理样式和基于内容的样式变化,还有链接、图像和水平分隔线。当把其他标签(比如 < a> 标签)放到 < pre> 块中时,就像放在 HTML/XHTML 文档的其他部分中一样即可。

pre标签

你在 <pre> 标签中使用 <code> 标签吗?

<pre> 标签的 “per” 的意思是 “preformatted text”(预格式化的文本),没有特别规定里面的文本是什么内容。<code> 标签的语义表示其中的文本是代码。这对我来说尤其有用,当我需要显示一段代码时,使用它们,下面是一个例子:

JavaScript

<pre><code> function cool(x) { return x + 1; } </code></pre>

1
2
3
4
5
<pre><code>
function cool(x) {
  return x + 1;
}
</code></pre>

解释一下:在<pre><code>和代码之间有一个换行,而这也会被显示成一个空行,这非常讨厌。没有非常好的 CSS 方法来解决这个问题,最好的方法是与 <pre> 标签同一行开始代码,或者用编译程序来去除这里的换行。

9159.com 1

<pre> <textarea> <code>三个标签区别:之所以要说这个,是因为我在写代码的时候遇到这样的问题:需要把html源代码在网页中显示出来,直接写<>这样的标签显然会被浏览器解析,因此我查了一下,可以用<代替< ,>代替>,但是直接这样写会失去代码中的换行等具体格式,非常难读,因此就使用了专门的标签实现。

< code>

  • < code> 标签用于表示计算机源代码或者其他机器可以阅读的文本内容。
    软件代码的编写者已经习惯了编写源代码时文本表示的特殊样式。< code> 标签就是为他们设计的。包含在该标签内的文本将用等宽、类似电传打字机样式的字体(Courier)显示出来。
    只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 < code> 标签。虽然 < code> 标签通常只是把文本变成等宽字体,但它暗示着这段文本是源程序代码。将来的浏览器有可能会加入其他显示效果。例如,程序员的浏览器可能会寻找 < code> 片段,并执行某些额外的文本格式化处理,如循环和条件判断语句的特殊缩进等。

  • 简而言之,一般在插入一行代码时使用< pre>,多行时使用< code>

1.pre标签的定义:

<pre>标签用来定义预格式化的文本,被包围在pre标签中的文本通常会保留空格和换行符, 而文本也会呈现出等宽字体。同样,pre标签的一个常见的应用便是用来保存计算机中的源代码文本。示例如下:

代码:

<pre> 
   html中pre和code标签,       html中pre和code标签   
   html中pre和code标签, html中pre和code标签    

   html中pre和code标签
</pre>

效果:

9159.com 2

pre在浏览器中的效果.png

选择一个字体

由于 <pre> 标签主要是用来显示代码块,而代码通常使用等宽字体,因此将 <pre> 的样式字体设置成等宽字体是个好主意。

对我们来说幸运地是,浏览器默认字体已经将 <pre> 设置成等宽字体,因此你可以不做任何处理。当然,你可以设置一个你喜欢的字体。

这里有篇文章是 Michael Tuck 写于 2009 年的,他研究了“font stacks”。font stack 是说将一组字体罗列在一个 font-family 标签中,首选字体列在前面,备选字体依次列在其后。他的等宽字体 font stack 较好地利用了跨平台系统预装字体。

font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

1
2
3
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console",
"Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
"Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

9159.com 3

我不确定 font stack 在今天有没有过时,不管怎样这是一个好的开端。

另外,你可以用自定义字体。或者使用第三方服务。在我写下这篇文章的时候,Typekit 提供了 23 种等宽字体。

  <pre>:pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。可以导致段落断开的标签(例如标题、<p> 和 <address> 标签)绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的。pre 元素中允许的文本可以包括物理样式和基于内容的样式变化,还有链接、图像和水平分隔线。当把其他标签(比如 <a> 标签)放到 <pre> 块中时,就像放在 HTML/XHTML 文档的其他部分中一样即可。

2.pre标签的功能:

pre标签一个常见的应用便是用来保存计算机中的源代码的文本。但是,需要注意的是, 可以导致段落断开的标签(例如标题、<p> 和 <address> 标签)绝不能包含在 <pre> 所定义的块里。 pre标签允许的文本可以包括物理样式和基于内容的样式变化,还有链接、图像和水平分隔线。 当把其他标签(比如 <a> 标签)放到 <pre> 块中时,就像放在 HTML/XHTML 文档的其他部分中一样即可。示例如下:

代码:

<pre>  
    &lt;html&gt;
    &lt;head&gt;
    &lt;script type=&quot;text/javascript&quot;           src=&quot;loadxmldoc.js&quot;&gt;
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
xmlDoc=&lt;<font     color="blue">a&nbsp;href="dom_loadxmldoc.asp"&gt;loadXMLDoc&lt;/a    &gt;</font>(&quot;books.xml&quot;);
document.write(&quot;xmlDoc is loaded, ready for use&quot;);
    &lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;
</pre>

效果:

9159.com 4

pre标签.png

折行还是不折行?

这有关个人偏好,对我个人来说,分两种情况。

当我自己在编辑器写代码时,我倾向于让代码自动折行而不出现水平滚动条。而当我在文章中阅读代码时,我喜欢代码不折行。我知道这很奇怪。在 CodePen 里,我们将折不折行提供成一个选项让用户自己选择,因为大家本来就是萝卜青菜各有所爱。

9159.com 5

在展示代码的时候,你需要选择究竟是否折行。如果你选择折行,幸运地,你可以使用为<pre>标签提供的独一无二的样式来保留空白同时折行,如同下面这样:

CSS

pre { white-space: pre-wrap; }

1
2
3
pre {
  white-space: pre-wrap;
}

如果你不想折行,你就不用像上面那样做,不过你得考虑如果一行太长了怎么办。太长的行可能会撑开固定宽度的容器或者超出容器范围。要避免这个,我建议你加上横向滚动条:

CSS

pre { overflow-x: auto; }

1
2
3
pre {
  overflow-x: auto;
}

9159.com 6

你也可能要考虑 max-height 指定最大高度,以及 overflow:auto 允许所有的滚动条,来避免代码块过高。

  将代码放在<pre>中的源码:

code标签

也许该让它自适应

一些人,可能包括你,既不喜欢折行也不喜欢滚动条。这种情况也有解决方案。你可以让 <pre> 保持默认的容器宽度,但是允许它在交互的时候展开:

CSS

pre:hover, pre:focus { width: min-content; }

1
2
3
4
pre:hover,
pre:focus {
  width: min-content;
}

9159.com 7

  

1.code标签的定义:

<code>标签, 用于表示计算机源代码或者其他机器可以阅读的文本内容。软件代码的编写 者习惯了编写代码时的代码格式,那么这个<code>标签就是为软件代码编写者设计的, code标签内的文本将用等宽、类似电传打字机样式的字体(Courier)显示出来。

如果在 email 中怎么办?

也许因为某些原因,你的 HTML 在 email 中使用。一些标签在 email 中可能会有问题,因为你的 css 在 email 中不生效,因此当特别长的不换行的文本存在时,可能会破坏掉 email 的布局。

在 CSS-Tricks, 我必须要用 RSS feed 自动生成电子报刊,因此我生成 RSS feed 时要一个特殊处理 HTML,保证对所有的 <pre> 标签强制添加一个 inline 样式如下:

XHTML

<pre style="white-space: pre-wrap;"></pre>

1
<pre style="white-space: pre-wrap;"></pre>

这是我所能做的保证代码块中很长的一行不会破坏掉布局。(一般我们除了加上面的那个外,还加上 word-wrap: break-wordword-break: break-all—— 译者注)

<pre>
&lt;div id="div1"&gt;
&lt;p id="p1"&gt;这是一个段落&lt;/p&gt;
&lt;p id="p2"&gt;这是另一个段落&lt;/p&gt;
&lt;/div&gt;

&lt;script&gt;
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
&lt;/script&gt;
</pre>

2.code标签的应用:

应该是只用在表示计算机程序源代码或者其他机器可以阅读的文本内容上。<code> 标签的功能有:将文本变成等宽字体;还有一个功能就是暗示这段文本是源程序代码。那么根据第二个功能,将来浏览器可能会根据自己的实际情况添加效果。例如,程序员的浏览器可能会寻找 <code> 片段,并执行某 些额外的文本格式化处理,如循环和条件判断语句的特殊缩进等。

代码:

<code>
       var a;
       var b=document.getELementById("id1").value;
       var c=document.getELementById("id2").value;

       return a+b+c;
</code>

效果:

9159.com 8

code使用.png

你需要代码语法高亮吗?

网上不乏各种语法高亮方案,你可以搜索自己喜欢的方案。我个人推崇 Prism.js,因为:

  1. 它代码量少。
  2. 9159.com,它无依赖。
  3. 它对标签的 class 起名起的好。
  4. 它允许你 copy 它的代码自己修改和定制。

9159.com 9

除非从 server 端直接生成 `` 的样式(用来语法分色),不然 Prism.js 已经足够好了。

  注意此时仍需要用<代替< ,>代替>。

code和pre之间的关系

共同点:都主要应用于浏览器显示计算机中的源代码。
不同点: code标签的一个功能是暗示浏览器code标签所包围的文本是计算机源代码,浏览器可以做出自己的 样式处理,pre标签则没有这项功能,但是pre标签可以保留文本中的空格和换行符,保留文本中的空格和换行符是计算机源代码显示 所必须的样式。code标签和pre标签是 可以嵌套使用的,但是必须注意两者的嵌套顺序。

你标注了代码是什么语言了吗?

我个人比较喜欢在代码块上标准出使用的语言。

比如:

9159.com 10

标记出语言的其中一种方式是通过 data-* 属性(可能你的语法高亮工具也已经要求你标记出)然后显示它,例如:

XHTML

<pre data-lang="HTML"><code> <h1>Example code</h1> <code></pre>

1
2
3
<pre data-lang="HTML"><code>
  <h1>Example code</h1>
<code></pre>

CSS

pre[data-lang]::before { content: attr(data-lang); display: block; }

1
2
3
4
pre[data-lang]::before {
  content: attr(data-lang);
  display: block;
}

我想这也不是一种特别简单的方法,所以可能一些人只是简单在代码里注释一下。也许用 title 属性是更好的选择?

  效果:

控制空格

如果你使用 tab 来缩进,你可能会觉得缩进太宽了。

默认情况下,tab 被按照 8 个空格来渲染,这很荒唐。

9159.com 11

在写代码的时候,我们通常让 tab 宽度为 4 个空格。幸运地,你可以用样式控制它:

CSS

pre { tab-width: 4; }

1
2
3
pre {
  tab-width: 4;
}

就我个人而言,我喜欢直接用空格缩进。

  9159.com 12

Other options

  <textarea>:标签定义多行的文本输入控件。文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。

其他选择

努力让代码块很好地展示在网页上可不是一件琐事,它是值得做的工作。如果你不想自己做这些工作,CodePen 提供了内嵌版可以很好地演示代码(还可以预览),内嵌 GitHub Gists 也是一个不错的选择。

悲催的国内,两个网站访问都慢 ╮(╯▽╰)╭ —— 译者注

1 赞 1 收藏 评论

9159.com 13

  源代码与上述相同,效果图为:

  9159.com 14

  <code>标签用于表示计算机源代码或者其他机器可以阅读的文本内容。软件代码的编写者已经习惯了编写源代码时文本表示的特殊样式。<code> 标签就是为他们设计的。包含在该标签内的文本将用等宽、类似电传打字机样式的字体(Courier)显示出来,对于大多数程序员和 W3School 的用户来说,这应该是十分熟悉的。只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 <code> 标签。虽然 <code> 标签通常只是把文本变成等宽字体,但它暗示着这段文本是源程序代码。将来的浏览器有可能会加入其他显示效果。例如,程序员的浏览器可能会寻找 <code> 片段,并执行某些额外的文本格式化处理,如循环和条件判断语句的特殊缩进等。

  <code>的效果图:

  9159.com 15

本文由9159.com发布于前端,转载请注明出处:这样的标签显然会被浏览器解析,   译文出处

关键词: