把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《关于表格内文字换行的再研究》。