google-code-prettify是一款非常轻量的语法高亮js库,用来对各种页面上的源码进行语法着色。压缩后的代码才17K ,很小,对于喜欢精简的人来说
prettify是最适合不过的了。在google的各种文档中 还有google code中都能看到它的身影。其项目主页为http://code.google.com/p/google-code-prettify/
其项目主页提供的用法和效果如下:
安装使用
- 下载 文件
-
在你的文件中包含这儿的脚本和样式表(你要保证这儿的 css 和 js 文件按在你的服务器上, 并且调整在 script 和 link标签中的路径)
href="prettify.css" type="text/css" rel="stylesheet" />
-
添加
onload="prettyPrint()"
到你的文件的 body 标签中. - 修改样式表,使用你自己喜欢的颜色.
<br />
<p style="text-indent:2em;">
<strong>使用方法</strong>
</p>
<p style="text-indent:2em;">
在 <tt><pre class="prettyprint">...</pre></tt> 或 <tt><code class="prettyprint">...</code></tt> 中间放上代码片段,它就会自动被美化了.
</p>
<p style="text-indent:2em;" align="left">
<strong>使用前效果</strong>
</p>
<p style="text-indent:2em;">
class Voila {<br />
public:
// Voila
static const string VOILA = “Voila”;
// will not interfere with embedded tags.
}
使用后效果:
class Voila { public: // Voila static const string VOILA = "Voila"; // will not interfere with embedded tags. }
</p><p style="text-indent:2em;">
<strong>修改默认主题方式:</strong>
</p>
如果你不喜欢默认的效果,还可以使用下其另外的主题,官方也提供了几个,具体见页面:<a href="http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html">http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html</a>修改也很简单将prettify.css文件的内容修改为几个主题代码里的内容就行了,如默认的内容是:<a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/prettify.css">http://code.google.com/p/google-code-prettify/source/browse/trunk/src/prettify.css</a>
<p style="text-indent:2em;">
从该下载页面下载的源代码程序里的文件似乎多了点(里面提供了一些用法demo和高亮调用的js代码)。因为js和css代码我也看不懂,所以里面的内容也不加评论和说明。第三方编辑器kindeditor-4.0.5里使用的高亮代码也是prettify,里面只用到了google-code-prettify项目里的两个文件:prettify.css和prettify.js,而其又增加了一个code.js文件用来定义各种语言高效的类型。显然这种方法也可以实现prettify代码高亮的调用。因此看来,想在自己的站点上使用代码简单高效高亮的,可以直接用google-code-prettify去实现,也可以通过使用kindeditor编缉器(kindeditor编缉器也是一个不错的中文编辑器,目前开源中国使用的就是该编辑器)。
</p>