Google Code Prettify是Google的代码高亮插件，由用于高亮显示HTML页面中源代码的js和css代码组成。
Google Code Prettify支持多种语言，非常充实。 支持代码语言的自动识别，不需要手动指定，渲染也很有效。 最重要的是它非常轻，加载速度远远快于SyntaxHighlighter，并且可以直接使用Markdown语法编写代码。
GitHub地址： https://github.com/Google/code-prett ify
1http://www.Sina.com/Google-code-prett ify提供了五个css主题，还支持自定义样式。 有关相关的demo和style文件，请参阅https://raw git.com/Google/code-prett ify/master/styles/index.html。
2http://www.Sina.com/Google-code-prett ify需要两个文件： prettify.js和prettify.css。 请下载到官方网站。 将这两个放入head模板后，如下所示。
link href=' http://Alfred-sun.github.io/assets/Google-code-prett ify/prett ify.CSS ' rel=' style shet ' type
script type=' text/JavaScript ' src=' http://Alfred-sun.github.io/assets/Google-code-prett ify/prett ify.js 这需要jQuery。
$(function () )。
window.prettyPrint prettyPrint (；
)； 现在，您可以使用pre/pre标签将其加亮。
主题Google的亮点插件易于使用，只需在pre的标签中插入prettyprint即可。
pre class='prettyPrint '
//code here
/pre 文件
google-code-prettify默认每五行显示一次行号。 如果要显示所有行号，只需在google-code-prettify中相应主题的css文件中注释以下内容即可：
li.L0、li.L1、li.L2、li.L3、li.L5、li.L6、li.L7、Li.l8 { list-style-type : none }
,51,51);font-weight:400;">设置完成后，插入代码块样式： 3.3. Markdown如果用 Markdown 来生成 HTML 的话，需事先给相关的标签追加必要的 class；Markdown 产生的代码块必然含义 <pre> 元素，那么可以用 jQuery 在 Prettyprinter 运行前处理下 HTML 样式：
$(function() {$('pre').addClass('prettyprint linenums').attr('style', 'overflow:auto');
});
这样就没有问题了，可以直接用 markdown 的前置 4 空格来写代码了。其中 addClass(‘prettyprint linenums’) 的 linenums 是添加行号的意思。默认只显示第 5、10、15… 行，可以在 css 文件中 li 的格式添加 list-style-type: decimal，以显示全部行号。
3.4. Bootstrap 代码框滚动如果博客中有用 Bootstrap，其中对 pre 有如下几句：
white-space:pre;white-space:pre-wrap;
word-break:break-all;
word-wrap:break-word;
这会使得 pre 中的代码自动换行，而不是溢出形成滚动条。如果不希望如此，可以注释掉。看个人喜好。
如果是滚动条，默认的滚动太难看而且还有个 Bug(stripe 的高亮背景色无法固定，随着滚动条位置改变而改变，可以考虑去掉 stripe，或者禁用横向滚动条)，可以修改一下样式，看一下：CSS 自定义浏览器滚动条样式。
下面讲一下如何在 leanote 博客中使用 Google Code Prettify，并实现代码框左右滚动的效果。
4.1. css+js 文件需要两个文件，prettify.js 和 prettify.css，把这两个放到 highlight.html 模板中，如下：
<link rel="external nofollow" href="http://alfred-sun.github.io/assets/google-code-prettify/prettify.css" rel="stylesheet" type="text/css" media="all"><script type="text/javascript" src="http://alfred-sun.github.io/assets/google-code-prettify/prettify.js"></script>
leanote 完整 highlight.html：
<!--http://leanote.com/js/google-code-prettify/prettify.css--><link rel="external nofollow" href="{{$.prettifyCssUrl}}" type="text/css" rel="stylesheet">
<!--自定义 css 文件，需要上传-->
<link rel="external nofollow" href="{{$.themeBaseUrl}}/customHilight.css" type="text/css" rel="stylesheet">
<!--http://leanote.com/js/google-code-prettify/prettify.js-->
<script src="{{$.prettifyJsUrl}}"></script>
<script>
$("pre").addClass("prettyprint linenums");
$('pre').addClass('prettyprint linenums').attr('style', 'overflow:auto');
$(function() {
window.prettyPrint && prettyPrint();
});
</script>
4.1. bootstrap 文件
由于 leanote 应用了 bootstrap 的样式，其内置的 pre 代码会自动换行，而不是溢出形成滚动条，因此我们需要自定义样式（以下为完整 customHilight.css 文件内容）：
/*自定义 ol 列表数字距离*/code.prettyprint ol.linenums, pre.prettyprint ol.linenums{
padding: 0 0 0 25px !important;
}
/*代码框左右滚动*/
pre.prettyprint {
white-space: pre !important;
word-wrap: break-word !important;
overflow:auto !important;
}
pre{
word-break: unset !important;
word-wrap:unset !important;
white-space:unset !important;
}
pre code{
white-space:unset !important;
}
code.prettyprint .linenums, pre.prettyprint .linenums{
white-space: pre;
word-wrap: break-word;
overflow:auto;
}
最后，清空浏览器缓存，就可以看到 leanote 博客代码框左右滚动的效果。完整效果，欢迎点击文章右下角"阅读原文"查看。
·end·
—如果喜欢，快分享给你的朋友们吧—
我们一起愉快的玩耍吧
本文分享自微信公众号 - 生信科技爱好者（bioitee）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。