prettify高亮显示网页代码

前记：因为博客系统中的Web Editor使用的是KindEditor，它默认保存的时候，保存的内容是<pre class="prettyprint lang-html"></pre>而不是<pre name="code"></pre>

所以用其他的语法提示比较麻烦，而我又比较的懒，所以直接用google-code-prettify了

使用说明：

首先添加文件

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

当然如果你觉得默认样式不好看，可以自己修改，这里我就直接在HTML页面修改了，因为它默认不换行，所以显得不是那么的友好

 

<style type="text/css">
        pre {
            white-space: pre-wrap; /* css-3 */
            white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
            white-space: -pre-wrap; /* Opera 4-6 */
            white-space: -o-pre-wrap; /* Opera 7 */
            word-wrap: break-word; /* Internet Explorer 5.5+ */
        }
</style>

默认不显示行号，这里我们可以写如下的代码，使之显示行号，但是貌似不完整，大家如果有更好的方法告诉我哦

$(window).load(function () {
            $("pre").addClass("prettyprint linenums");
})

最后就是调用了，可以写在body的onload事件中，但是不建议，这里我们用jquery，在DOM节点加载完之后就调用

$(window).load(function () {
            $("pre").addClass("prettyprint linenums");
            prettyPrint();
})