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

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

折行还是不折行？

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

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

在展示代码的时候，你需要选择究竟是否折行。如果你选择折行，幸运地，你可以使用为

标签提供的独一无二的样式来保留空白 同时 折行，如同下面这样： 
 
pre { white-space: pre-wrap;}
        

         Copy after login
        
       

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

pre { overflow-x: auto;}

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

也许该让它自适应

一些人，可能包括你，既不喜欢折行也不喜欢滚动条。这种情况也有解决方案。你可以让

保持默认的容器宽度，但是允许它在交互的时候展开： 
 
pre:hover,pre:focus { width: min-content;}
        

         Copy after login
        
       

如果在 email 中怎么办？

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

在 CSS-Tricks, 我必须要用 RSS feed 自动生成电子报刊，因此我生成 RSS feed 时要一个特殊处理 HTML，保证对所有的

标签强制添加一个 inline 样式如下： 
 

        

         Copy after login
        
       

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

你需要代码语法高亮吗？

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

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

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

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

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

比如：

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

 
Example code

        

         Copy after login
        
       

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

pre { tab-width: 4;}