Google Code Prettify是谷歌推出的一款轻量级的代码高亮项目,效果虽然略逊 highlight.js ,但 prettify 非常小巧,使用它来实现代码高亮显示也相当不错。下边我们简单看看 prettify.js 的使用方法。
- Pretify 项目地址:https://github.com/google/code-prettify
- Pretify 的一些样式:http://jmblog.github.io/color-themes-for-google-code-prettify/
从上面地址中下载 prettify.js 和 prettify.css 文件。
1 引入JS文件
<script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="prettify.js"></script> <!--样式文件--> <link rel="stylesheet" src="prettify.css" />
2 调用 prettify
在<body>
标签上添加调用方法,如下:
<body onload="prettyPrint()"> <!--页面内容--> </body>
将你需要高亮显示的代码片断放在<pre>
标记里,如下:
<pre class="prettyprint"> /* 你的代码片断 */ </pre>
这样就可以试下代码高亮了,但每次手动为<pre>
标签添加prettyprint
类,显示有些麻烦,使用下边的方法解决这个问题。
附 小技巧
页面中加入如下的一段Javascript代码,就可以不需要第2步了。
<script type="text/javascript"> $(document).ready(function(){ $("pre,code").addClass("prettyprint"); prettyPrint(); }); </script>
为了提高页面加载速度,我们应该将引用的 js 文件放置在底部。