首页 > 代码学习

kindeditor4.1.3开启语法高亮显示——Google Code Prettify

发布时间:2012-10-24 14:00:04 来源:星知苑 作者:星之宇

因为看到Google Code Prettify对代码进行语法着色的效果还是不错,虽然相对于syntaxHighlighter来说还有不小的差距,但是Prettify的js库和css文件可以说的上是短小精悍了。不到15K的体积,对加载几乎没有影响。

废话就不说了,下面开始KindEditor,它默认保存的时候,保存的内容是<pre class="iceCode:xxx"></pre>(XXX就是代码格式)比如<pre class="iceCode:php"></pre>。

注意:不同的代码高亮是不兼容的,所以用了一种高亮代码后再用另一个,那么就比较麻烦了。

因为kindeditor 4.1.3官方用的是google-code-prettify高亮(以下简称prettify),所以我这里也用prettify高亮,因为集成比较方便。

[break]

直接用kindeditor官方的演示是没有代码的的处理的,还有前台如何使用高亮也没有说明。看了几个编辑器官方的说明文档总是不怎么全的。

 

后台编辑器代码是没有高亮显示的,但是代码会有特效

1.后台需要加载prettify.js和prettify.css,

还有页脚填上<script>prettyPrint(); </script>

<script charset="utf-8" src="./kindeditor/plugins/code/prettify.js"></script>
<script>
        var editor;
        editor.ready(function(K) {
                editor= K.create('textarea[name="content"]',{
                cssPath :[ './kindeditor/plugins/code/prettify.css']
                 });	
        });
	prettyPrint(); 
</script>

 

2.前端显示,添加下面的代码到前端页面。

<link type="text/css" rel="stylesheet" href="./kindeditor/plugins/code/prettify.css"/>
<script type="text/javascript" src="./kindeditor/plugins/code/prettify.js"></script><script>prettyPrint();</script>

 

 

注:最好还要修改plugins/code文件夹下的prettify.css,再最后加上以下内容,不加的话,前台代码不会换行,如果有长代码会很难看的,width是代码宽度,自己看着改。

 

pre.iceCode:{
	width: 630px;
	margin: 1em auto;
	padding: 1em;
	white-space: pre-wrap;
}

 

 

 

相关合集

  • 火辣辣app福引导welcome合集
火辣辣app福引导welcome合集

简介:火辣辣app福引导welcome合集有大量的不同欢乐去让你得到,要是你喜欢去探索就来下载,绝对是有你能够感觉到很开心的东西,有那种很精彩的画面,再配上那种好听的声音,每一个都是能够让你感觉到很不错的,生活上是你绝对需要的,能够让你随时的找回自信,有很多的美女为你来倾心的进行服务,很到位很周到,是你平时没有感受到的。