CKEditor代码高亮显示插件Code Snippet安装

Code Snippet是CKEditor4.4.1的新插件，主要提供添加代码片段高亮显示的功能。
另外注意一点的是，Code Snippet只是作为CKEditor的插件，真正实现代码高亮的是highlight.js这个代码高亮JS库。
Code Snippet只是将highlight.js作为默认的高亮库,由于highlight.js已经集成在Code Snippet中，所以我们在使用CKEditor时候是不需要另外再引用highlight.js这个库。

安装方法:
下载Code Snippet高亮插件: 点击下载, 将里面的整个文件夹解压到ckeditor\plugins文件夹内。如下图所示



然后设置ckeditor\config.js配置文件, 将插件添加进去,代码如下

CKEDITOR.editorConfig = function (config) {
    //添加插件，多个插件用逗号隔开
    config.extraPlugins = 'codesnippet';
    //设置高亮风格, 如果不设置着默认风格为default
    codeSnippet_theme: 'monokai_sublime';
}

也可以在编辑器初始化的使用下面代码添加高亮插件：

CKEDITOR.replace('文本框ID' ,{extraPlugins: 'codesnippet',codeSnippet_theme: 'monokai_sublime'});

如果按照上面添加插件的步骤而出现下面这两个错误, 是因为下载的CKEditor缺少widget和lineutils插件，只要到官网将这两个插件下载下来，然后将这两个插件解压到ckeditor\plugins文件夹内即可。一般是先出现第一个widget插件无法找到的错误，添加了widget插件后才会出现第二个找不到 lineutils插件的错误.

1. CKEDITOR.resourceManager.load] Resource name "widget" was not found at"http://localhost:16577/Scripts/ckeditor/plugins/widget/plugin.js?t=
2. CKEDITOR.resourceManager.load] Resource name "lineutils" was not found at "http://localhost:16577/Scripts/ckeditor/plug

widget下载地址: http://ckeditor.com/addon/widget
lineutils下载地址: http://ckeditor.com/addon/lineutils


前端代码高亮
以上配置只是在编辑器中显示高亮, 在前端页面还需要再配置才能显示高亮, 配置方法就是在要显示高亮的页面引入一个css样式文件,一个highlight.js

引入方法

<link rel="stylesheet" href="styles/monokai_sublime.css">
<script src="highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
//可将js及css文件复制到前端使用
//hljs.initHighlightingOnLoad();可直接复制到highlight.pack.js文件尾部

文件来源
monokai_sublime.css为config.js中配置的高亮样式, 编辑器和前端页面须使用同一个文件才能显示一样的样式,

monokai_sublime.css位置在: ckeditor\plugins\codesnippet\lib\highlight\styles\monokai_sublime.css
highlight.pack.js位置在: ckeditor\plugins\codesnippet\lib\highlight\highlight.pack.js