我们在写一些网页技术性的文章时，往往会贴出一些网页代码出来，但是如果不加CSS处理，直接显示在网页的话可读性就很差，所以今天就教大家利用google-code-prettify来让代码高亮显示的方法。
首先第一步去下载google-code-prettify，下载地址为：http://code.google.com/p/google-code-prettify/downloads/list
一般下载最新的带small版本的就可以了，表示压缩版，体积小。
下载后解压，会发现里有很多的JS文件和一个CSS文件，不用管他，找出两个文件，分别是：prettify.css和prettify.js（说明：其他的JS文件是干什么用的，细心的朋友不难发现，里面都是用各种程序语言命名的JS文件，如lang-css.js，不难发现这个JS就是只对CSS代码高亮显示的意思，而prettify.js是对所有语言的高亮显示。）
然后在网页中引用prettify.css和prettify.js，然后在body标签中添加一个onload事件，代码如下：<body onload="prettyPrint()">
最后将需要高亮显示的代码放在pre标签中，代码如下：<pre class="prettyprint">这里贴出你所要显示的代码</pre>，代码中的样式类prettyprint的意思就是让pre标签中的代码高亮显示，如果要显示行号可以在class中添加linenums类，但是我发现google-code-prettify显示行号有问题，有时显示有时不显示，而且显示的时候只显示5的整数倍行号，非要显示行号的话需要配合前端设计框架Bootstrap，这里不详细说了。
具体的利用google-code-prettify来让代码高亮显示的代码如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>网页中使用google-code-prettify来让代码高亮显示的方法-HTMer</title> <link href="prettify.css" rel="stylesheet" type="text/css"> <script src="prettify.js"></script> </head> <body onload="prettyPrint()"> <pre class="prettyprint">这里贴出你所要显示的代码</pre> </body> </html>