google-code-prettify是一款非常轻量的语法高亮js库，用来对各种页面上的源码进行语法着色。压缩后的代码才17K ，很小，对于喜欢精简的人来说prettify是最适合不过的了。在google的各种文档中 还有google code中都能看到它的身影。其项目主页为http://code.google.com/p/google-code-prettify/

其项目主页提供的用法和效果如下:

安装使用

  1. 下载文件
  2. 在你的文件中包含这儿的脚本和样式表(你要保证这儿的 css 和 js 文件按在你的服务器上, 并且调整在 script 和 link标签中的路径)
1<link href="src/prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="src/prettify.js"></script>
  • 添加onload=“prettyPrint()” 到你的文件的 body 标签中.
  • 修改样式表,使用你自己喜欢的颜色.

使用方法：在<pre class="prettyprint">...</pre> 和 <code class="prettyprint">...</code> 中间放上代码片段,它就会自动被美化了。

可以使用如下代码测试，效果见下面的显示：

1class Voila {
2public:
3  // Voila
4  static const string VOILA = "Voila";
5  // will not interfere with embedded tags.
6}

修改默认主题方式

如果你不喜欢默认的效果，还可以使用下其另外的主题，官方也提供了几个，具体见页面： http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html

修改也很简单将prettify.css文件的内容修改为几个主题代码里的内容就行了，如默认的内容是： http://code.google.com/p/google-code-prettify/source/browse/trunk/src/prettify.css

从该下载页面下载的源代码程序里的文件似乎多了点(里面提供了一些用法demo和高亮调用的js代码)。因为js和css代码我也看不懂，所以里面的内容也不加评论和说明。第三方编辑器kindeditor-4.0.5里使用的高亮代码也是prettify，里面只用到了google-code-prettify项目里的两个文件：prettify.css和prettify.js，而其又增加了一个code.js文件用来定义各种语言高效的类型。显然这种方法也可以实现prettify代码高亮的调用。因此看来，想在自己的站点上使用代码简单高效高亮的，可以直接用google-code-prettify去实现，也可以通过使用kindeditor编缉器(kindeditor编缉器也是一个不错的中文编辑器，目前开源中国使用的就是该编辑器)。