把 Google Code Prettify 应用至 Blogger

图片来自网络

记得以前给自己的 Blogger 部署过 Google Code Prettify，不过后来可能是因为主题被重置过，效果没了。今天把它重新找了回来，日后也会逐渐套用至需要的 Blog 上。本文就作为相关内容的技术笔记吧。

部署

在 Blogger 后台中，点「主题背景」，然后进行「自定义」，去「修改 HTML」。
在 head 标签中放置：

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>

然后用下列标签把代码括起来，就可以实现本文中的代码块效果：

<pre class="prettyprint">……</pre>

pre 标签中的代码按原始格式存放即可，不过小于号（<）和大于号（>）仍然要进行转义。

---

以下是一些常用到的 option，更多的内容烦请移驾 官方Github页面。

主题

在引用 run_prettify.js 的时候，URL 后面加一个参数 skin 即可。例如：

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert'/>

目前有五种主题，预览图点 这里。

不标记为代码

用一组带 nocode 样式的 span 标签括起来即可，还可以加上自己的样式。例如

<span class="nocode" style="color: red;">注意</span>

语言指定

在 pre 标签中指定 lang-* 样式，例如：

<pre class="prettyprint lang-sh">
if [ ! -d '/myfile' ]
then
    mkdir /myfile
fi
</pre>

<pre class="prettyprint lang-cpp">
class A
{
public:
    int a;
}
</pre>

内置支持的语言有 ["bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl"]，还有一些可以通过 extensions 进行支持，参见官网页面。

自动换行

有些代码有可能把屏幕宽度撑得很大。要想自动换行的话，在 head 标签中添加：

<style>
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-all;
}
</style>

这里的效果是按字母换行，可能会切断单词。如果要按单词换行，去掉 word-break 这一行。详细的解释参见我的另一篇 Blog《关于表格内文字换行的再研究》。

关于表格内文字换行的再研究

通常，搞 Web 开发的都会遇到这个问题，就是苦心设计的表格被讨厌的一连串英文字符给撑破了。最常见的是自己开发的论坛或留言板，如果有一个情绪激动的家伙打了百来个英文的感叹号，那往往就会出现内容在这些感叹号上不换行，结果让表格撑破，页面变得乱七八糟。

解决这个问题的办法，相信很多朋友都知道了。通过 CSS 中指定几个样式，可以比较满意地解决这个问题。一个是 word-break:break-all，一个是 word-wrap:break-word，表格中的文字则还有一个是 table 标签的 table-layout:fixed 样式。这三个样式给定之后，就不会再遇到表格被文字顶破的问题了。

稍稍解释一下上面三个样式。word-break:break-all 是让英文单词中部的换行成为可能，比如

beautiful

word-break 样式还有另外两个取值。一个是 normal，就是通常默认的，对中文断字而对英文单词不断的情况。另一个是 keep-all，是对中文，准确地说是亚洲文字也不断字。然而，和字面上的理解意思不同，keep-all 并不能让一个英文句子不被换行。要做到这一点的方法，稍后我会谈到。

word-wrap:break-word 是让连续的符号（如 ! 号）之间进行断字成为可能。这是解决那种一大串感叹号造成的问题的一个关键。没有这个样式的话，对连续符号的断字不会发生。

另一个关键是 table-layout:fixed。它指明说表格不要去试图自己计算宽度，就按照 HTML 中定义的宽度来显示就好。只有当 table-layout:fixed 和 word-wrap:break-word 同时指定时，针对连续符号的断字才会正确发生。缺少 table-layout:fixed，断字不会发生，表格仍被撑大。缺少 word-wrap:break-word，则表格不会被撑大，但断字不会发生，超过显示区域的内容将被 hide。

好了，知道了如何让所有内容都断字换行之后，另一个问题来了：如何让所有内容都不断字换行？

我们知道，即使指定 word-break:keep-all 样式，也无法阻止一个英文句子在空格处不被换行。而且汉字中的某些标点符号，浏览器也会很「智能」地把它给换行掉（起码IE会，这就足够了）。然而，一个好消息是，虽然要求不断字的情况远比要求断字要少见，但它的实现方法却相当简单。你只要把内容用 <nobr></nobr> 标签对括起来就行。被 <nobr></nobr> 标签对括起来的内容，浏览器绝对不会对它进行换行。只要记住这一点就很好办了。

不过，想让内容不换行的同时，通常并不希望表格宽度因此而变得不确定。因此，常常也需要指定一个 table-layout:fixed 的样式。这样，就可以让表格宽度维持设计时的大小不变，或者通过指定相对宽度来维持一个固定的比率，而并不受单元格中内容的任何影响。在设计自适应屏幕宽度的标题列表表格时，这个技术也许会有些用处。