CKeditor在各大CMS中使用颇为广泛，而很多技术类博客都涉及到添加代码块<code>标签，其中代码高亮(代码着色)就成了一个必须解决的问题。
老九使用的博客后台有phpcms，wordpress，github page和Laravel voyager几种。其中github page只能实现静态，暂不考虑；wordpress也可以使用CKeditor作为内容编辑器。而另外两个富媒体编辑器采用的都是ckeditor。因而为了实现博客的代码高亮，单独接入SyntaxHighlighter就有点得不偿失，这里主要针对Ckeditor的代码高亮实现方案做解决。
CKEditor由JavaScript编写，功能强大、配置容易、跨浏览器、支持多种编程语言并且开源。作为目前最优秀的可见即可得网页编辑器之一，本身就提供了比较强大的高亮组件：CodeSnippet。
CodeSnippet
Code Snippet是CKEditor4.4.1的新插件，主要提供添加代码片段高亮显示的功能。另外注意一点的是，Code Snippet只是作为CKEditor的插件，真正实现代码高亮的是highlight.js这个代码高亮JS库。
Code Snippet只是将highlight.js作为默认的高亮库,由于highlight.js已经集成在Code Snippet中，所以我们在使用CKEditor时候是不需要另外再引用highlight.js这个库。
安装方法
安装CodeSnippet可以通过两种方案解决。
1. Ckeditor提供了自定义编辑器插件并打包的方案，在组件页面即可定制自己需要的相关插件，然后统一打包下载。
2.同样先访问Ckeditor的组件页面，找到CodeSnippet下载后，将里面的整个文件夹解压到ckeditor文件夹下的plugins文件夹内即可。
这里要注意两点，第一，无论是哪种方法，都需要三个插件支持，Widget，Dialog以及lineutils。如果是独立下载也需要把这几个插件下载下来，用同样的方法放进plugins目录。第二，在安装各种插件包的时候很容易搞错版本，请务必把Ckeditor，CodeSnippet以及其他插件包的版本号做好对应。
Ckeditor的版本号可以在CHANGES.md中找到。
配置
这里老九的配置如下，请根据你的具体情况参阅：
/**
* @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.html or http://ckeditor.com/license
*/CKEDITOR.editorConfig = function( config ) {
//添加插件，多个插件用逗号隔开
config.extraPlugins = 'widget,dialog,lineutils,codesnippet';
// Restricts languages to JavaScript and PHP.
config.codeSnippet_languages = {
php: 'PHP',
javascript： 'JavaScript',
bash: 'Bash',
css: 'CSS',
html: 'HTML',
json: 'JSON',
nginx: 'Nginx',
sql: "SQL",
};
注：这里也可以设置编辑器工具栏按钮增删，如果有疑惑，请参考本文。
另外，如果Phpcms中工具栏按钮配置无效，这是因为在libs/form.class.php中对config.toolbar做了替换处理，请针对该文件进行修改。
页面高亮实现
到此为止，后台已经可以使用了。
虽然在编辑器中添加的代码片段有高亮效果，但是将编辑器里的代码片段放到页面中却没有高亮的效果。这是因为编辑器的插件已经默认集成了highlight.js这个代码高亮库，所以我们要在页面上显示高亮就得重新引用和添加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下载。下载地址
这里也可以直接使用相关的CDN。另外可以根据喜欢的样式风格挑选对应的样式表。
请注意更改css样式和JS的引用地址，址以自己网站中highlight.js的存放地址为准。
到这里就完成高亮的配置了，赶紧测试试一试吧。