扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
详解Google Code Prettify代码高亮Prettify.js库使用及其应用
2015-01-09 20:55
栏目：技术开发
查看(46495)
不管是之前自己的技术博客还是现在的公司官网，作为一个互联网从业者，经常需要写一些博文，这也是我的习惯，而写技术文章很多时候需要在文章中插入代码，如果以普通字符形式展示出来我觉得不能够显示出代码的魅力。而通常大家都是利用代码高亮的方式，让代码在文章中显得更加具体化，就好像我们在用编辑器一样。就那WP来说，大家都知道有一些代码高亮的插件，当然我也曾经尝试过几个，但都不是特别满意，再者大家都知道使用插件的效率相对而言是比较低的。
而今天就跟大家介绍一下托管在Google Code上的一款代码高亮开源js库Prettify.js，实际上大家可以在网上搜索得到很多相关的内容，但网
上大多都是国人你传我我传你，很多写文章的作者甚至都没有去项目的主页去看最原始的文档。以下页面是Google站点，大家访问请自备梯子
项目主页：https://code.google.com/p/google-code-prettify/
源代码下载页面：https://code.google.com/p/google-code-prettify/downloads/list
项目WIKI：https://code.google.com/p/google-code-prettify/w/list
下载后得到一个压缩的文件包，里面包含prettify.js和run_prettify.js、prettify.css以及将近30种编程语言专属的js正则代码文件，也正式因为这样很多地方其实主要就用到了其中的部分。下面就分别来介绍它的应用（保证比普通文章要详细以及实用）。
1、最简单的使用
就如官方wiki中的一样，首先我们来点简单的，其实这也是网上99%的文章所介绍的，当然其中又有一半以上都没有介绍全。首先当然是下载项目的文件保存到到你自己的项目某个文件夹中。然后在页面中写入以下代码引用js和CSS（注意自己的路径）。
<script type="text/javascript" src="prettify/prettify.js"></script> <!--很多文章中所忽略的调用CSS，那样出来的效果不堪入目哦--> <link type="text/css" rel="stylesheet" href="prettify/prettify.css"/>
然后在body标签使用onload事件载入prettyPrint()方法<body onload=”prettyPrint()”>
这样就可以使用Prettify.js带给你代码高亮的体验了，不过好像貌似官方的CSS我个人不是特别的喜欢，特别是字体它没约束，而Chrome给点额默认pre标签的字体为monospace，虽然还可以，但如果你的网站一旦指定了字体，比如微软雅黑等，那代码使用微软雅黑就有点儿够呛的。包含字体原因，我提供一下覆盖的部分CSS，其实你加到官方CSS文件最后就可以，当然你为了追求性能与完美完全可以把官方对应的代码删除。
.prettyprint *{font-family:'courier new',monospace;}
.prettyprint .com { color: #93a1a1; }
.prettyprint .lit { color: #AE81FF; }
.prettyprint .pun,
.prettyprint .opn,
.prettyprint .clo { color: #F8F8F2; }
.prettyprint .fun { color: #dc322f; }
.prettyprint .str,
.prettyprint .atv { color: #E6DB74; }
.prettyprint .kwd,
.prettyprint .tag { color: #F92659; }
.prettyprint .typ,
.prettyprint .atn,
.prettyprint .dec,
.prettyprint .var { color: #A6E22E; }
.prettyprint .pln { color: #66D9EF; }
当然如果你要选择跟我们一样的，可以直接看我们的官网对应的CSS，我们官网就是使用这个JS库来实现代码高亮的，比如你现在看到的就是最终的效果，而这就是基础的应用。
2、高级应用
其实上面只是这个强大库的最基础的应用，其实它还有更高级的应用，当然这里我也不可能完全讲到（主要是英文有点烂，怕理解不够透彻，然后误导大家），爱折腾的朋友可以直接去项目的WIKI页面查看更多内容。
首先说一个最基本的应用，就是在前面显示行号，这个其实就是在pre标签的class选择器中加入linenums就可以了，就会得到如下风格：
/*这里演示添加选择器linenums来显示行号*/
.prettyprint *{font-family:'courier new',monospace;}
.prettyprint .com { color: #93a1a1; }
.prettyprint .lit { color: #AE81FF; }
其次再说下，其实我们可以不再body里面写onload事件，也就是让代码自动加载，这时候我们只需要把prettify.js换成run_prettify.js即可，但是需要说明的是run_prettify.js文件中有引用Google源的内容，而国内屏蔽了谷歌的访问，因此如果要使用这种方式请把这个库文件解压后找出其中引用谷歌源的文件下载到本地然后再引用，否则打开特别慢甚至打不开。
此外，当我们使用这种方式的时候，在wiki中有autoload、lang、skin、callback四种参数供我们使用，具体使用技巧请访问项目wiki页面参考。除此之外还有更多说明哦，这里就不多说，直接看wiki哦。
3、相关延伸
其实说到这里，大家可能会觉得，特别是小白，这样插入也挺麻烦的，每次都要插入<pre class=”prettyprint “>和</pre”>，但实际上我们可以进一步改装，比如我们可以把这些东西写入我们网站的编辑器中。就算我们不写入编辑器中，我们让代码更简单。
比如每次需要插入代码的时候，我们只需要插入<pre>和</pre>就可以，同时也可以把body的解放出来。比如这里我演示一下用jQuery来简单的改装一下。
$(window).load(function(){
$("pre").addClass("prettyprint");//如果其他地方也要用到pre，我们可以再加一个父标签的选择器来区分
prettyPrint();//代替body上的onload事件加载该方法
})
当然不要忘记引用jQuery库了，实际上现在很多网站都应用到了jQuery，这样就不成问题了，当然如果你的网站不使用jQuery，那么你也可以用原生JS来处理。
本来可以写更详细的，但很晚了，先睡觉了哦~~
转载请注明出处：详解Google Code Prettify代码高亮Prettify.js库使用及其应用 - 微构网络
- 在线咨询
- 15574303608
-
项目经理微信
-
移动版官网