插件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>
<!--下面代码需要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();
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值