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

来自随意问技术百科
跳转至: 导航搜索

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>
<script type="text/javascript">
   $(document).ready(function(){
 		 prettyPrint();
 		})
</script>

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

int x = foo();  
/* This is a comment  This is not code Continuation of comment */
int y = bar();

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