插件insertpre+语法高亮插件google-code-prettify，解决CKEditor4代码高亮显示问题

来源：互联网发布：360软件管家迅雷下载编辑：程序博客网时间：2024/05/06 06:56

CKEditor4的外观界面我很喜欢，所以一直在使用，但是对代码高亮没有很好的支持，如何使代码高亮显示呢？使用插件insertpre+语法高亮插件google-code-prettify可以很好地解决这个问题。

一下载地址

CKEditor4下载地址：http://ckeditor.com/download
insertpre plugin下载地址：http://ckeditor.com/addon/insertpre
google-code-prettify下载地址：http://code.google.com/p/google-code-prettify/downloads/list

二 insertpre插件安装方法

解压insertpre下载文件，将解压后的文件夹放到CKEditor的plugins下。

配置config.js，加入下面代码就可以使用insertpre功能了。

config.extraPlugins = 'insertpre';//config.toolbar中加入"InsertPre"按钮。

三 google-code-prettify语法高亮插件安装

解压下载文件，页面<head></head>间加入下面代码：

<link href="prettify.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="prettify.js"></script><!--下面代码需要jquery.js支持--><script type="text/javascript">    $(document).ready(function(){   prettyPrint();  })</script>

页面中<pre class="pettyprint"></pre>间的代码会自动语法高亮显示，下面是一个例子，里面的代码在pre标签间。

int x = foo();  /* This is a comment  <span class="nocode">This is not code</span> Continuation of comment */int y = bar();

本文来自：http://www.suiyiwen.com/question/4270