一个分享个人学习、开发经验的Blog,http://www.joyphper.net

利用Prettify实现代码高亮

posted @ 2012-05-24 15:43 | 阅读:3573 | 评论:0 | 分类: Javascript

地址:http://code.google.com/p/google-code-prettify/

特点是无须指定语言!

使用方法:
1. 包含脚本和样式表

 

<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>

2. 添加 onload="prettyPrint()" 到你的文件的 body 标签中.
3. 在 <pre class="prettypring">...</pre><code class="prettypring">...</code> 中间放上代码片段,它就会自动被美化了.

应用实例代码:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta http-equiv="Content-Language" content="zh-CN" />
	<title>prettify</title>  
	<link rel="stylesheet" href="prettify/sunburst.css" /> 
	 <script src="prettify/prettify.js"></script>  
</head>  
<body>  
  
<pre class="prettyprint">  
public class Test {
	/**
	 * @param args
	 */
	public static void main(String[] args) {
		// TODO Auto-generated method stub
	}
}
</pre> 
<script>prettyPrint();</script>
</body>  
</html>

应用实例代码下载:upload/201205/2012052415423620.zip

TAG: javascript , Prettify , 代码高亮

共有0条评论 发表评论>>

点击换一张验证码