您的位置：首页 > 编程语言

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

2012-12-21 14:58 786 查看
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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航