使用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/