CKEditor 4.4.1 添加代码高亮显示插件功能--使用官方推荐Code Snippet插件
随着CKEditor4.4.1的发布,以前一直困扰的代码高亮问题终于完美的得到解决,在CKEditor4.4中官方发布了Code Snippet这个代码片段的插件,终于可以完美的内嵌使用代码高亮了,以前都是使用网友自己开发的代码高亮插件。下面就来介绍如何使用Code Snippet这个代码高亮插件。本文还介绍了CKEditor中如何安装Code Snippet插件。
新版本附加信息
- CKEditor 4.4的更新详情:http://ckeditor.com/whatsnew
- CKEditor 官方对代码高亮插件Code Snippet的文档:https://docs.ckeditor.com/#!/guide/dev_codesnippet
- Code Snippet的下载地址:http://ckeditor.com/addon/codesnippet
Code Snippet简介
Code Snippet是CKEditor4.4.1的新插件,主要提供添加代码片段高亮显示的功能。另外注意一点的是,Code Snippet只是作为CKEditor的插件,真正实现代码高亮的是highlight.js这个代码高亮JS库。
Code Snippet只是将highlight.js作为默认的高亮库,由于highlight.js已经集成在Code Snippet中,所以我们在使用CKEditor时候是不需要另外再引用highlight.js这个库。(点击这里查看highlight.js的官方网站)。
以前的CKEditor版本由于没有比较好的代码高亮插件,都是自己自定义插件,当时用的是SyntaxHighlighter这个代码高亮库。大家也可网上搜下SyntaxHighlighter的资料
如何安装Code Snippet?添加代码片段高亮插件的具体步骤
添加Code Snippet的方法很简单,不过由于版本兼容问题,目前官网上这个插件对4.4兼容最好,其他兼容则未进行测试,所以使用这个插件最好是将CKEditor升级到4.4.1。
如果已经熟悉CKEditor的插件机制,那么我们只要到官网上将Code Snippet下载下来(下载地址见文章顶部),将里面的整个文件夹解压到ckeditor文件夹下的plugins文件夹内。
然后设置下ckeditor的config.js配置文件,将插件添加进去即可,代码如下(这里只设置了一个插件属性,其他属性可根据需要设置):
CKEDITOR.editorConfig = function (config) {
//添加插件,多个插件用逗号隔开
config.extraPlugins = 'codesnippet';
//使用zenburn的代码高亮风格样式 PS:zenburn效果就是黑色背景
//如果不设置着默认风格为default
config.codeSnippet_theme = 'zenburn';
}
也可以在编辑器初始化的使用下面代码添加高亮插件:
CKEDITOR.replace('文本框ID'
,{extraPlugins: 'codesnippet',codeSnippet_theme: 'zenburn'}
);
这里有一点需要注意,如果按照上面添加插件的步骤而出现下面这两个错误:
- CKEDITOR.resourceManager.load] Resource name "widget" was not found at"http://localhost:16577/Scripts/ckeditor/plugins/widget/plugin.js?t=
- [CKEDITOR.resourceManager.load] Resource name "lineutils" was not found at "http://localhost:16577/Scripts/ckeditor/plug
这是因为下载的CKEditor缺少widget和lineutils插件,到官网将这两个插件下载下来,只要将这两个插件解压到ckeditor文件夹下的plugins文件夹内就可以了。一般是先出现第一个widget插件无法找到的错误,添加了widget插件后才会出现第二个找不到lineutils插件的错误,可见Code Snippet需要依靠这两个插件。这两个插件的下载地址如下:
还有最简单的方式,首先打开Code Snippet下载地址,将插件添加到自定义CKEditor编辑器
然后进入自定义CKEditor编辑器页面,这里可以看到已经将代码高亮插件集成到CKEditor里面了,最后点击下载就可以了,当然这里有很多自定义UI和插件,可以选择自己需要的插件和喜欢的编辑器界面。
这样就完美的添加上了代码片段高亮插件了。
如何让代码片段在普通页面上显示高亮?
我们会发现,虽然在编辑器中添加的代码片段有高亮效果,但是将编辑器里的代码片段放到页面中却没有高亮的效果。这是因为编辑器的插件已经默认集成了highlight.js这个代码高亮库,所以我们要在页面上显示高亮就得重新引用和添加highlight.js库。
我们先看下编辑器中的高亮代码:
<pre>
<code class="language-html"><!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>测试页面</title>
</head>
<body>
<div>代码片段高亮效果</div>
</body>
</html></code></pre>
可以看到 高亮的效果主要是根据<pre>标签和 <code class="language-html">这两个标签来显示的,其中language-html表示的显示高亮语言为HTML。highlight.js就是根据这两个标签来显示高亮效果。
我们首先要将highlight.js下载下来(下载地址,可以选择要高亮的编程语言种类),然后在需要代码高亮的页面添加下面的代码:
<!--开头这里的样式为默认的风格,可以根据自己的喜好更换风格-->
<!--我的高亮效果是zenburn-->
<link rel="stylesheet" href="styles/default.css">
<script src="highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
要注意更改css样式和JS的引用地址,地址以自己网站中highlight.js的存放地址为准。另外高亮库默认使用的是default.css的高亮风格,这里是highlightjs的各种代码高亮风格的显示效果,大家可以到上面测试选择自己喜欢的高亮风格:http://highlightjs.org/static/test.html。highlightjs的具体使用方法可以看官网的文档:http://highlightjs.org/usage/。
到这里就可以完整的将代码片段进行高亮显示了。
作者:十有三
出处:https://shiyousan.com/post/635379486598316231
CKEditor 4.4.1 添加代码高亮显示插件功能--使用官方推荐Code Snippet插件的更多相关文章
- Xcode 插件优缺点对照(推荐 20 款插件)
Xcode 插件优缺点对照(推荐 20 款插件) 2016-01-22 06:16 编辑: lansekuangtu 分类:iOS开发 来源:董铂然 的博客 28 13527 /XCode/" ...
- Code Snippet 插件 使用——代码高亮
Code Snippet 下载地址 下载后安装,重启windows live writer 插入-->CodeSnippet 将代码粘贴进去,如图: 代码效果: @Controllerpubli ...
- Xcode插件优缺点对比(推荐20款插件)
本文大致整理了自己用过的一些插件的使用感想(就是好不好用). 在那之前先简单贴两条插件须知,知道的可以忽略. 1.Alcatraz 类似于管理第三方库的cocoapods,管理插件也有个Alcatra ...
- 【转】Xcode 插件优缺点对比(推荐 20 款插件)
[转自]http://www.cnblogs.com/dsxniubility/p/5099191.html 1.Alcatraz 类似于管理第三方库的cocoapods,管理插件也有个Alcatra ...
- Xcode 插件优缺点对比(推荐 20 款插件)
链接地址:http://mp.weixin.qq.com/s?__biz=MjM5OTM0MzIwMQ==&mid=402439598&idx=1&sn=e8800cb0aa2 ...
- 在Zend Studio中为ThinkPHP添加代码自动提示功能
身边很多朋友都使用ThinkPHP或CodeIgniter等开发框架为自己的项目提高开发效率. 在得力于这些优秀框架良好的设计结构的同时,也头疼于代码的自动完成提示功能没有纯PHP网站那么完善了.经常 ...
- Laravel添加代码自动提示功能
在使用Laravel框架的时候,可能会碰上代码无法自动提示的情况,那么如何添加自动提示功能呢? 1,首先在composer.json中加入以下内容: "require": { &q ...
- ckeditor4.4.6添加代码高亮
研究了很久才发现,在 ckeditor4.4.6中添加代码高亮超级简单啊,下面直接上过程 ckeditor4.4.6支持自定义代码高亮,利用Code Snippet插件并默认启用highlight.j ...
- submit插件安装的问题与集成了插件的submit
写在最前面,方法有二种.一种是在线安装,这种办法我尝试过,受网速和软件卡顿的问题,进行不顺利.第二种就是我下面介绍的这种,手动安装. 最精华的在后面,可以直接跳转到最后.我找了很久的,最新版的汉化,而 ...
随机推荐
- Java中在特定区间产生随机数
生成指定范围内的随机数 这个是最常用的技术之一.程序员希望通过随机数的方式来处理众多的业务逻辑,测试过程中也希望通过随机数的方式生成包含大量数字的测试用例.问题往往类似于: 如何随机生成 1~100 ...
- 【转】Python之日期与时间处理模块(date和datetime)
[转]Python之日期与时间处理模块(date和datetime) 本节内容 前言 相关术语的解释 时间的表现形式 time模块 datetime模块 时间格式码 总结 前言 在开发工作中,我们经常 ...
- sublime3添加python编译系统
好记性不如烂笔头 为sublime3添加python编译系统,这里使用的anonconda2中的python.exe(即python2.7版本) 步骤: (1)打开sublime,打开“工具-> ...
- 默认以管理员身份运行VS2013/15/17
方法如下: 1.右击VS的快捷方式,选择[属性],打开属性对话框,再点击[高级]按钮,如下图所示: 2.再勾选[用管理员身份运行],点击[确定]即可: 然后就可以双击VS快捷方式,直接以管理员身份运行 ...
- centos6.7环境半虚拟化软件xen及xm配置工具使用详解
1.xen软件的安装及配置 环境准备: ①操作系统:centos6.7(注意最好使用centos6.7,centos6.5无法使用xen的图形化界面创建操作系统) ②调整虚拟机配置,内存4G(推荐2G ...
- Ex 5_28 Alice想要举办一个舞会..._第十次作业
根据总人数建立顶点数量为总人数的无向图,顶点之间有边相连表示两个人相互认识,没有边则表示不认识.对于每一个顶点v,设d(v)表示顶点的度,若d(v)<5,即v认识的人数少于5,则不邀请v,若d( ...
- 如何利用github打造个人博客专属域名(文字版本)
1. 前言 此篇文章仅限于记录,不适合作为教程使用. 2. 步骤 2.1 先决条件 有github账号,有个人域名(可在万网购买),电脑本地安装有git环境 2.2 在github新建仓库.例如我的g ...
- jquery之源码
1.插件扩展机制 所有的Jquery代理对象的实例,都是扩展自$.fn对象的 意味着只要我们继续扩展$.fn这个对象的功能,就相当于扩展了所有的Jquery代理对象的实例的功能 代码 var $bod ...
- jq中Deferred对象的使用
var d=$.Deferred(); //deferred下面的方法有: // ["resolve", "resolveWith", "reject ...
- CNN卷积核计算
作者:十岁的小男孩 目录 单层卷积核计算 三维卷积核计算 Padding=Valid&&Same 总结