CKEditor 4.4.1添加代码高亮插件功能教程【使用官方推荐的代码片段插件】

本文说明了在CKEditor 4.4.1中添加代码高亮插件的功能。分享给大家参考，如下：

随着CKEditor4.4.1的发布，之前一直困扰的代码高亮问题终于得到了完美的解决。在CKEditor4.4中，Code Snippet的插件正式发布，最终代码高亮可以完美使用。之前用的是网友开发的代码高亮插件。让我们介绍如何使用代码片段来突出显示插件。本文还介绍了如何在CKEditor中安装代码片段插件。

新版本的附加信息

CKEditor 4.4更新详情：代码亮点插件的http://ckeditor.com/whatsnew CKEditor官方文档代码片段：https://docs.ckeditor.com/#!/guide/dev _ Code Snippet代码片段下载地址：http://ckeditor.com/addon/codesnippet代码片段简介

Code Snippet是CKEditor4.4.1的新插件，主要提供添加代码片段并高亮显示的功能。另外需要注意的是，Code Snippet只是作为CKEditor的插件使用，代码的亮点是highlight.js，突出了js库。

代码片段仅使用highlight.js作为默认的高亮库。由于highlight.js已经集成到Code Snippet中，所以在使用CKEditor时，我们不需要参考highlight.js库。(点击此处查看highlight.js官网)。

以前版本的CKEditor没有好的代码高亮插件，所以都是自定义插件。当时使用的是SyntaxHighlighter。您也可以在线搜索语法高亮器的信息

如何安装代码片段？添加代码片段以突出显示插件的具体步骤

添加代码片段的方法非常简单。但是由于版本兼容性问题，目前官网这个插件最好兼容4.4，其他兼容性还没有测试。因此，在使用这个插件时，最好将CKEditor升级到4.4.1。

如果你已经熟悉ckeditor的插件机制，那么我们只需要在官网下载Code Snippet(下载地址见文章顶部)，将里面的整个文件夹解压到CKEditor文件夹下的plugins文件夹即可。

然后设置ckeditor的config.js配置文件，添加插件。代码如下(这里只设置一个插件属性，其他属性可以根据需要设置):

ckeditor . editor config=function(config){//添加插件，多个插件之间用逗号隔开。config . extra plugins=' code snippet '；//使用zenburn的代码高亮样式PS:zenburn的效果是黑色背景。//如果没有设置默认样式，则为DefaultConfig。CodeSnippet _ Theme=' Zenburn}您还可以使用以下代码在编辑器初始化中添加高亮显示插件：

CKEDITOR.replace('文本框ID '，{extra plugins : '代码片段'，code snippet _ theme : ' Zen burn ' })；这里需要注意的一点是，如果您按照上面的步骤添加插件，将会出现以下两个错误：

在“http://localhost :16577/Scripts/ckeditor/plugins/widget/plugin . js”中找不到资源名称“widget”？t=[CKEDITOR . Resource manager . load]在“http://localhost :16577/Scripts/CKEditor/Plug”处找不到资源名称“lineutils”这是因为下载的CKEditor缺少小部件和lineutils插件。要在官网下载这两个插件，只需将它们解压到ckeditor文件夹下的plugins文件夹中即可。一般第一个widget插件找不到的错误会先出现，第二个lineutils插件找不到的错误会在添加widget插件后出现。因此，代码片段需要依赖这两个插件。这两个插件的下载地址如下：

http://ckeditor.com/addon/widgethttp://ckeditor.com/addon/lineutils也有最简单的方法。首先，打开代码片段下载地址，并将插件添加到自定义CKEditor编辑器中

然后进入自定义CKEditor编辑器页面，可以看到代码高亮插件已经集成到CKEditor中，最后点击下载。当然，还有很多定制的UIS和插件，所以你可以选择你需要的插件和你喜欢的编辑器界面。

这样，就完美地添加了代码片段高亮插件。

如何让代码片段在普通页面上突出显示？

我们会发现，虽然编辑器中添加的代码片段有高亮效果，但是将编辑器中的代码片段放在页面上没有高亮效果。这是因为编辑器插件默认集成了代码的高亮库，所以我们必须重新引用并添加highlight.js库来显示页面上的高亮。

让我们首先看看编辑器中突出显示的代码：

precode class='language-html '！doctype html lang=' en ' xmlns=' http://www.w3.org/1999/XHTML' head metacarset=' utf-8 '/title测试页/title/head odyiv代码片段高亮效果/div/body/html/code/Pre可以看到高亮效果主要是根据Pre标签和code class='language-HTML '标签显示的，其中language-HTML所表达的高亮语言为HTML。Highlight.js根据这两个标签显示高亮效果。

我们首先需要下载highlight.js(下载地址，可以选择要高亮显示的编程语言的种类)，然后在需要高亮显示代码的页面中添加以下代码：

！-最开始这里的样式是默认样式，可以根据自己的喜好改变样式-！-我的高光效果是zenburn-link rel='样式表' href=' styles/default . CSS ' rel=' externalnofollow '脚本src=' http : highlight . pack . js '/scriptscripthljs . inithighlingload()；/script要注意改变css样式和JS的引用地址，地址要基于你网站中highlight.js的存储地址。此外，高亮库默认使用default.css的高亮样式。下面是highlightjs的各种代码高亮样式的显示效果。可以测试选择自己喜欢的高光风格：http://highlightjs.org/static/test.html.如何使用highlightjs可以在官网的文档中找到：http://highlightjs.org/usage/.

此时，您可以完全突出显示代码片段。

更多对JavaScript相关内容感兴趣的读者可以查看本网站专题：《JavaScript错误与调试技巧总结》、《JavaScript操作XML文件技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、0103010。

希望本文对JavaScript编程有所帮助。