使用 pre 標籤樣式的注意事項

　　你可能正在使用

 標籤。這是一個 HTML 中非常特別的標籤，它允許其中的空格真正顯示出來。例如：四個空格將真實顯示成四個空格。這不同於其他標籤通常的做法，其他標籤會將之間的空白壓縮成一個。從這一點來說，<pre class="brush:php;toolbar:false">標籤真的很有用。 <h3>
　　你在 <pre class="brush:php;toolbar:false"> 標籤中使用 <code> 標籤嗎？ </code>

　　

 標籤的 「pre」 的意思是 「preformatted text」（預先格式化的文字），沒有特別規定裡面的文字是什麼內容。 <code> 標籤的語意表示其中的文字是代碼。這對我來說尤其有用，當我需要顯示一段程式碼時，使用它們，以下是一個例子：<pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false"><code>
function cool(x) {
  return x + 1;
}
</code>

　　解釋一下：在

<code>和程式碼之間有一個換行，而這也會被顯示成一個空白行，這非常討厭。沒有非常好的 CSS 方法來解決這個問題，最好的方法是與 <pre class="brush:php;toolbar:false"> 標籤同一行開始程式碼，或用編譯程式來移除這裡的換行。 <p style="text-align: center">
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/007/0d1d239a75cc159e4746f3c705f17de8-0.jpg" class="lazy" alt="Screen Shot 2016-05-21 at 9.02.25 AM.png"></p><h3>#
　　選擇一個字型</h3><p>#
　　由於 </p><pre class="brush:php;toolbar:false"> 標籤主要是用來顯示程式碼區塊，而程式碼通常使用等寬字體，因此將 <pre class="brush:php;toolbar:false"> 的樣式字體設定成等寬字體是個好主意。 <p>
　　對我們來說幸運地是，瀏覽器預設字體已經將 </p><pre class="brush:php;toolbar:false"> 設定成等寬字體，因此你可以不做任何處理。當然，你可以設定一個你喜歡的字體。 <p>
這　　裡有篇文章是 Michael Tuck 寫於 2009 年的，他研究了「font stacks」。 font stack 是說將一組字體羅列在一個 font-family 標籤中，首選字體列在前面，備選字體依次列在其後。他的等寬字體 font stack 較好地利用了跨平台系統預先安裝字體。 </p><pre class="brush:php;toolbar:false">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 在今天有沒有過時，不管這是一個好的開始。

　　另外，你可以用自訂字體。或使用第三方服務。在我寫下這篇文章的時候，Typekit 提供了 23 種等寬字體。

　　折行還是不折行？

　　這有關個人偏好，對我個人來說，分兩種情況。

　　當我自己在編輯器寫程式碼時，我傾向於讓程式碼自動折行而不出現水平捲軸。而當我在文章中閱讀程式碼時，我喜歡程式碼不折行。我知道這很奇怪。在 CodePen 裡，我們將折不折行提供成一個選項讓用戶自己選擇，因為大家本來就是蘿蔔青菜各有所愛。

# 　　在展示程式碼的時候，你需要選擇究竟是否折行。如果你選擇折行，幸運地，你可以使用

標籤提供的獨一無二的樣式來保留空白同時折行，如同下面這樣：<pre class="brush:php;toolbar:false">pre {
  white-space: pre-wrap;
}

　　如果你不想折行，你就不用像上面那樣做，不過你得考慮如果一行太長了怎麼辦。太長的行可能會撐開固定寬度的容器或超出容器範圍。要避免這個，我建議你加上橫向捲軸：

pre {
  overflow-x: auto;
}

# 　　你也可能要考慮 max-height 指定最大高度，以及 overflow:auto 允許所有的捲軸，來避免程式碼區塊過高。

　　也許該讓它自適應

　　一些人，可能包括你，既不喜歡折行也不喜歡滾動條。這種情況也有解決方案。你可以讓

 保持預設的容器寬度，但允許它在互動的時候展開：<pre class="brush:php;toolbar:false">pre:hover,
pre:focus {
  width: min-content;
}

# 　　如果在 email 中怎麼辦？

　　也許因為某些原因，你的 HTML 在 email 中使用。有些標籤在 email 中可能會有問題，因為你的 css 在 email 中不生效，因此當特別長的不換行的文字存在時，可能會破壞掉 email 的佈局。

　　在 CSS-Tricks, 我必須要用 RSS feed 自動生成電子報刊，因此我生成 RSS feed 時要一個特殊處理 HTML，保證對所有的

 標籤強制添加一個 inline 樣式如下：<pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false">

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

　　你需要代码语法高亮吗？

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

1. 它代码量少。

2. 
   

3. 它无依赖。

4. 
   

5. 它对标签的 class 起名起的好。

6. 
   

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

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

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

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

　　比如：

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

<pre class="brush:php;toolbar:false"><code>
  <h1 id="Example-code">Example code</h1>
<code></code></code>

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

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

　　控制空格

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

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

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

pre {
  tab-width: 4;
}

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

　　其他选择

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

以上是使用 pre 標籤樣式的注意事項的詳細內容。更多資訊請關注PHP中文網其他相關文章！