标签: 语法高亮

使用google-code-prettify代码语法高亮显示

KindEditor中web文本编辑器中代码高亮使用的就是google-code-prettify ,它默认保存的时候,保存的内容是

<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");
            prettyPrint();
})

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