蒙国造博客

Google Code Prettify实现代码高亮

Google Code Prettify是谷歌推出的一款轻量级的代码高亮项目,效果虽然略逊 highlight.js ,但 prettify 非常小巧,使用它来实现代码高亮显示也相当不错。下边我们简单看看 prettify.js 的使用方法。

从上面地址中下载 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 文件放置在底部。

退出移动版