Posted in Javascript onDecember 28, 2010
在<head></head>标签之间加入这两行代码：
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"/> <script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"/>
将<body>改为：
<body onload='prettyPrint()'>
将需要着色的代码写入以下形式的<pre></pre>标签之中：
<pre class=”prettyprint”> /*source code*/
更多演示
今天这篇文章主要讲述使用 google-code-prettify 来实现代码的高亮显示，以前我使用 highlight.js 来实现文章中代码的高亮显示。 prettify 非常小巧且配置简单，使用它来实现代码的高亮显示是个不错的选择。下边我们简单看看 prettify.js 的使用方法：
1.引入 jQuery 文件和 prettify.js 文件
<scripttype="text/javascript"src="jquery-1.6.1.min.js"></script> <scriptsrc="prettify.js"type="text/javascript"></script>
2.调用 prettify.js 实现代码高亮
在 body 标签上添加调用方法，如下：
<body onload="prettyPrint()">
</body>
将你需要高亮显示的代码片断放在<pre>标记里，如下：
<pre class="prettyprint"> @*你的代码片断*@ </pre>
使用 jQuery 小技巧实现优化
上述方法可以实现代码的高亮，但每次手动为<pre>标签添加"prettyprint"类，显示有些麻烦。使用下边的代码片断来解决这个问题并替换掉 body 的"onload"的事件，实现分离：
$(window).load(function(){
$("pre").addClass("prettyprint");
prettyPrint();
})
到这我们应该已经成功使用 prettify.js 实现了代码的高亮显示，为了提高页面加载速度，我们应该将引用的 js 文件放置在底部
prettify 代码高亮着色器google出品
- Author -
mdxy-dxy声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@