CKEditor安装代码高亮插件Code Snippet

Code Snippet是CKEditor中的一个插件，主要提供代码片段高亮显示的功能。Code Snippet虽然是CKEditor的插件，但实现代码高亮功能的是highlight.js这个JS库。Code Snippet插件并默认启用highlight.js库，以支持在内容编辑区域直接插入带有代码高亮的代码片。

一.下面是安装这个插件的步骤。
1.CKEditor中安装Code Snippet
下载Code Snippet插件: 从官网下载此插件, 解压到ckeditorplugins文件夹内。
如下图所示

2.修改ckeditorconfig.js配置文件, 将插件添加进去,代码如下

CKEDITOR.editorConfig = function (config) {
    //添加插件，多个插件用逗号隔开
    config.extraPlugins = 'codesnippet';
    //设置高亮风格, 如果不设置着默认风格为default
    codeSnippet_theme: 'monokai_sublime';
}
也可以在编辑器初始化的使用下面代码添加高亮插件：
CKEDITOR.replace('文本框ID' ,{extraPlugins: 'codesnippet',codeSnippet_theme: 'monokai_sublime'});

注意：如果出现缺少插件的错误，请到官网下载相关插件，然后安装（安装方法同Code Snippet的安装方法）。

配置（ckeditor:config.js）：config.extraPlugins = 'lineutils';

二.前端页面代码高亮
上面的配置只是在编辑器中显示高亮, 在前端页面还需要在页面引入monokai_sublime.css（CKEditor配置文件中提到过）和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文件尾部