您好,匿名用户
随意问技术百科期待您的加入

使用CKEditor4,如何使插入的代码高亮显示?

+4 投票

CKEditor4的外观界面我很喜欢,所以一直在使用,但是对代码高亮没有很好的支持,如何使代码高亮显示呢?

用户头像 提问 2012年 12月20日 @ Nero 上等兵 (377 威望)
更改标签 2012年 12月20日 @Saber
分享到:

1个回答

+4 投票
 
最佳答案

CKEditor官网插件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();
用户头像 回复 2012年 12月20日 @ Jayce 上等兵 (271 威望)
编辑 2012年 12月20日 @Jayce
提一个问题:

相关问题

0 投票
1 回复 23 阅读
用户头像 提问 2013年 11月15日 @ Janna 下士 (667 威望)
0 投票
1 回复 35 阅读
用户头像 提问 2013年 12月2日 @ Rider 上等兵 (281 威望)
0 投票
1 回复 44 阅读
0 投票
0 回复 25 阅读

欢迎来到随意问技术百科, 这是一个面向专业开发者的IT问答网站,提供途径助开发者查找IT技术方案,解决程序bug和网站运维难题等。
温馨提示:本网站禁止用户发布与IT技术无关的、粗浅的、毫无意义的或者违法国家法规的等不合理内容,谢谢支持。

欢迎访问随意问技术百科,为了给您提供更好的服务,请及时反馈您的意见。
...