Google Code Prettify 代码高亮插件使用小结

Google Code Prettify 是 Google 的一款代码高亮插件，它由 js 代码和 css 代码构成，用来高亮显示 HTML 页面中的源代码。

Google Code Prettify 支持的语言数量比较多、比较全，支持自动识别代码语言，不需要手动指定，渲染效果也不错。最重要的是，非常轻巧，加载速度远比 SyntaxHighlighter 快得多，而且可以直接使用 Markdown 的语法写代码。

GitHub 地址：https://github.com/google/code-prettify

1

主题

google-code-prettify 提供了 5 个 css 主题可供选择，而且支持自定义 style。相关的 demo 及 style 文件参见：https://rawgit.com/google/code-prettify/master/styles/index.html。

2

文件

google-code-prettify 需要两个文件，prettify.js和prettify.css，去官网下载。把这两个放到 head 模板中，如下：

考虑到加载速度，最好 js 写到文档末尾，body 闭合标签之前，css 写到头部之后，还需要在合适位置(如：$(document).ready) 添加如下代码，用于识别并高亮代码块，这个需要使用 jQuery：

到这里，我们就可以使用标签进行高亮了。

3.1. 基本用法

Google 的高亮插件使用比较方便，只需要在的标签上加入 prettyprint 即可。

3.2. 行号设置

google-code-prettify 默认每五行显示一次行号，如果想要显示所有的行号，我们只需要在 google-code-prettify 对应主题的 css 文件中找到下面一样把它注释掉即可：

设置完成后，插入代码块样式：

3.3. Markdown

如果用 Markdown 来生成 HTML 的话，需事先给相关的标签追加必要的 class；Markdown 产生的代码块必然含义元素，那么可以用 jQuery 在 Prettyprinter 运行前处理下 HTML 样式：

这样就没有问题了，可以直接用 markdown 的前置 4 空格来写代码了。其中addClass(‘prettyprint linenums’)的 linenums 是添加行号的意思。默认只显示第 5、10、15… 行，可以在 css 文件中 li 的格式添加，以显示全部行号。

3.4. Bootstrap 代码框滚动

如果博客中有用 Bootstrap，其中对 pre 有如下几句：

这会使得 pre 中的代码自动换行，而不是溢出形成滚动条。如果不希望如此，可以注释掉。看个人喜好。

如果是滚动条，默认的滚动太难看而且还有个 Bug(stripe 的高亮背景色无法固定，随着滚动条位置改变而改变，可以考虑去掉 stripe，或者禁用横向滚动条)，可以修改一下样式，看一下：CSS 自定义浏览器滚动条样式。

下面讲一下如何在 leanote 博客中使用 Google Code Prettify，并实现代码框左右滚动的效果。

4.1. css+js 文件

需要两个文件，prettify.js 和 prettify.css，把这两个放到 highlight.html 模板中，如下：

leanote 完整 highlight.html：

4.1. bootstrap 文件

由于 leanote 应用了 bootstrap 的样式，其内置的 pre 代码会自动换行，而不是溢出形成滚动条，因此我们需要自定义样式（以下为完整 customHilight.css 文件内容）：