使用pre標(biāo)簽樣式時(shí)需要注意什么

你可能正在使用 <pre> 標(biāo)簽。這是一個(gè) HTML 中非常特別的標(biāo)簽，它允許其中的空格真正顯示出來(lái)。例如：四個(gè)空格將真實(shí)顯示成四個(gè)空格。這不同于其他標(biāo)簽通常的做法，其他標(biāo)簽會(huì)將之間的空白壓縮成一個(gè)。從這一點(diǎn)來(lái)說(shuō)，<pre>標(biāo)簽真的是很有用。

　　你在 <pre> 標(biāo)簽中使用 <code> 標(biāo)簽嗎？

　　<pre> 標(biāo)簽的 “pre” 的意思是 “preformatted text”（預(yù)格式化的文本），沒(méi)有特別規(guī)定里面的文本是什么內(nèi)容。<code> 標(biāo)簽的語(yǔ)義表示其中的文本是代碼。這對(duì)我來(lái)說(shuō)尤其有用，當(dāng)我需要顯示一段代碼時(shí)，使用它們，下面是一個(gè)例子：

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

　　解釋一下：在<pre><code>和代碼之間有一個(gè)換行，而這也會(huì)被顯示成一個(gè)空行，這非常討厭。沒(méi)有非常好的 CSS 方法來(lái)解決這個(gè)問(wèn)題，最好的方法是與 <pre> 標(biāo)簽同一行開(kāi)始代碼，或者用編譯程序來(lái)去除這里的換行。

　　選擇一個(gè)字體

　　由于 <pre> 標(biāo)簽主要是用來(lái)顯示代碼塊，而代碼通常使用等寬字體，因此將 <pre> 的樣式字體設(shè)置成等寬字體是個(gè)好主意。

　　對(duì)我們來(lái)說(shuō)幸運(yùn)地是，瀏覽器默認(rèn)字體已經(jīng)將 <pre> 設(shè)置成等寬字體，因此你可以不做任何處理。當(dāng)然，你可以設(shè)置一個(gè)你喜歡的字體。

這　　里有篇文章是 Michael Tuck 寫(xiě)于 2009 年的，他研究了“font stacks”。font stack 是說(shuō)將一組字體羅列在一個(gè) font-family 標(biāo)簽中，首選字體列在前面，備選字體依次列在其后。他的等寬字體 font stack 較好地利用了跨平臺(tái)系統(tǒng)預(yù)裝字體。

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;

　　我不確定 font stack 在今天有沒(méi)有過(guò)時(shí)，不管怎樣這是一個(gè)好的開(kāi)端。

　　另外，你可以用自定義字體?；蛘呤褂玫谌椒?wù)。在我寫(xiě)下這篇文章的時(shí)候，Typekit 提供了 23 種等寬字體。

　　折行還是不折行？

　　這有關(guān)個(gè)人偏好，對(duì)我個(gè)人來(lái)說(shuō)，分兩種情況。

　　當(dāng)我自己在編輯器寫(xiě)代碼時(shí)，我傾向于讓代碼自動(dòng)折行而不出現(xiàn)水平滾動(dòng)條。而當(dāng)我在文章中閱讀代碼時(shí)，我喜歡代碼不折行。我知道這很奇怪。在 CodePen 里，我們將折不折行提供成一個(gè)選項(xiàng)讓用戶(hù)自己選擇，因?yàn)榇蠹冶緛?lái)就是蘿卜青菜各有所愛(ài)。

　　在展示代碼的時(shí)候，你需要選擇究竟是否折行。如果你選擇折行，幸運(yùn)地，你可以使用為<pre>標(biāo)簽提供的獨(dú)一無(wú)二的樣式來(lái)保留空白同時(shí)折行，如同下面這樣：

pre {
  white-space: pre-wrap;
}

　　如果你不想折行，你就不用像上面那樣做，不過(guò)你得考慮如果一行太長(zhǎng)了怎么辦。太長(zhǎng)的行可能會(huì)撐開(kāi)固定寬度的容器或者超出容器范圍。要避免這個(gè)，我建議你加上橫向滾動(dòng)條：

pre {
  overflow-x: auto;
}

　　你也可能要考慮 max-height 指定最大高度，以及 overflow:auto 允許所有的滾動(dòng)條，來(lái)避免代碼塊過(guò)高。

　　也許該讓它自適應(yīng)

　　一些人，可能包括你，既不喜歡折行也不喜歡滾動(dòng)條。這種情況也有解決方案。你可以讓 <pre> 保持默認(rèn)的容器寬度，但是允許它在交互的時(shí)候展開(kāi)：

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

　　如果在 email 中怎么辦？

　　也許因?yàn)槟承┰?，你?HTML 在 email 中使用。一些標(biāo)簽在 email 中可能會(huì)有問(wèn)題，因?yàn)槟愕?css 在 email 中不生效，因此當(dāng)特別長(zhǎng)的不換行的文本存在時(shí)，可能會(huì)破壞掉 email 的布局。

　　在 CSS-Tricks, 我必須要用 RSS feed 自動(dòng)生成電子報(bào)刊，因此我生成 RSS feed 時(shí)要一個(gè)特殊處理 HTML，保證對(duì)所有的 <pre> 標(biāo)簽強(qiáng)制添加一個(gè) inline 樣式如下：

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

　　這是我所能做的保證代碼塊中很長(zhǎng)的一行不會(huì)破壞掉布局。（一般我們除了加上面的那個(gè)外，還加上 word-wrap: break-word 和 word-break: break-all —— 譯者注）

　　你需要代碼語(yǔ)法高亮嗎？

　　網(wǎng)上不乏各種語(yǔ)法高亮方案，你可以搜索自己喜歡的方案。我個(gè)人推崇 Prism.js，因?yàn)椋?/p>

1. 它代碼量少。

2. 
   

3. 它無(wú)依賴(lài)。

4. 
   

5. 它對(duì)標(biāo)簽的 class 起名起的好。

6. 
   

7. 它允許你 copy 它的代碼自己修改和定制。

　　除非從 server 端直接生成 <span> 的樣式（用來(lái)語(yǔ)法分色），不然 Prism.js 已經(jīng)足夠好了。

　　你標(biāo)注了代碼是什么語(yǔ)言了嗎？

　　我個(gè)人比較喜歡在代碼塊上標(biāo)準(zhǔn)出使用的語(yǔ)言。

　　比如：

　　標(biāo)記出語(yǔ)言的其中一種方式是通過(guò) data-* 屬性（可能你的語(yǔ)法高亮工具也已經(jīng)要求你標(biāo)記出）然后顯示它，例如：

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

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

　　我想這也不是一種特別簡(jiǎn)單的方法，所以可能一些人只是簡(jiǎn)單在代碼里注釋一下。也許用 title 屬性是更好的選擇？

　　控制空格

　　如果你使用 tab 來(lái)縮進(jìn)，你可能會(huì)覺(jué)得縮進(jìn)太寬了。

　　默認(rèn)情況下，tab 被按照 8 個(gè)空格來(lái)渲染，這很荒唐。

　　在寫(xiě)代碼的時(shí)候，我們通常讓 tab 寬度為 4 個(gè)空格。幸運(yùn)地，你可以用樣式控制它：

pre {
  tab-width: 4;
}

　　就我個(gè)人而言，我喜歡直接用空格縮進(jìn)。

　　其他選擇

　　努力讓代碼塊很好地展示在網(wǎng)頁(yè)上可不是一件瑣事，它是值得做的工作。如果你不想自己做這些工作，CodePen 提供了內(nèi)嵌版可以很好地演示代碼（還可以預(yù)覽），內(nèi)嵌 GitHub Gists 也是一個(gè)不錯(cuò)的選擇。

以上就是使用pre標(biāo)簽樣式時(shí)需要注意什么的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注億速云其它相關(guān)文章！