[经验技术]Kindeditor与SyntaxHighlighter整合实现代码着色

目的： 鉴于网络中许多程序员在进行技术交流时，时常会将程序源代码直接显示于页面之中，这样有两个弊端。第一、如果源代码在显示之前没有经过“特别处理”，有可能代码会在页面显示的同时直接运行后输出，造成页面错误输出；第二、用户在浏览该页面，读取源代码内容的时候，有可能显示不够美观，造成阅读困难。因此我们在输出源代码的时候，使之能够像在我们的Notepad ++ 、Vim、 或Eclipse这样的编辑器中的显示效果一样，阅读起来就十分方便、美观了。


方法如下：


一、获取组件


        在线编辑器：Kindeditor-4.1.10
        语法高亮组件：SyntaxHightlighter-3.0.83




二、关于Kindeditor使用方法（略）




三、我们要了解Kindeditor这个在线编辑器编辑代码的地方在哪里。


        打开编辑器，默认在第一排的第七个图标，找到这个图标，点击之后，弹出一个“插入程序代码”对话框，上面有一个下拉菜单，有一个文本域。点击下拉菜单，会有很多语言选择的项，如Javascript、PHP、HTML等，你想要在你的编辑器中插入什么语言的源代码，就选择什么语言。然后在文本域中输入你需要插入的代码，点击“确定”，你会看到，你的代码已经在Kindeditor编辑器中显示。

              

        如果你查看你输入的信息的HTML源代码，你会看到，你的代码被放置在一个<pre>标签中，这个标签的功能会将包含的内容按原样输出，如图：

        值得特别注意的是这个<pre>中的class属性的值是非常重要的，SyntaxHighlighter要识别你插入的内容中包含的是什么语言的源代码，就是通过这个标签及它的class属性来识别。上图就是你在编辑器中插入了一段PHP代码，整个代码块被包含在一个带有class属性的<pre>标签对中，里面的一个函数即是我们需要输出的内容：




四、认识SyntaxHighlighter组件的文件结构


        将下载下来的压缩包解压之后所得文件的结构如下，其中对我们有用的文件只有  scripts  和  styles  两个。

        scripts ： 该文件夹下包含很多的*.js文件，文件都是以 shBrush****. js 方式命名， 功能是将你插入的不同语言的源代码按照对应的语法规则进行着色。 （打开文件你会发现都是一些正则规则），至于怎么使用请继续往下读。其中里面有一个很重要的文件，即： shCore.js，该文件是代码着色的核心文件。


        styles： 里面全部都是 *.css文件，以 shTheme****. css 的方式命名。 主要功能是对你插入的代码以什么样的风格进行高亮显示 ，即主题。里面有个很有用的文件，即： shCore.css，它是选择显示风格的核心文件


        剩下的可以自己了解一下。


        index.html 是一个示例文件，打开之后里面是一段JS的示例代码，显示效果如下：

重要： 我们查看它的源代码，你会发现，其中就包含了以下的CSS和JS文件，需要显示的代码内容同样被包含在一个<pre>标签中，其中包含的什么语言的代码，也是通过一个CSS属性来标识。

        那么我们再回想在Kindeditor在线编辑器中的代码，是不是插入的语言代码也是用这种风格插入的。但是仔细的你会发现，它们的CSS属性的内容还是有不同之处的，对照显示如下图：

           

         我们能否这样考虑： 通过修改Kindeditor的核心代码，使之在编辑插入源码内容的时候，Kindeditor生成<pre>的class属性的时候默认以SyntaxHighligher的class属性样式生成，那么，我们在代码中只要加载SyntaxHighligher中的js和CSS来解析它，生成相应的样式则可以达到目的。


五、修改Kindeditor代码


        回到Kindeditor，我们要把生成<pre>标签的核心文件找出来，并修改它，该文件的路径如下：Kindeditor/plugins/code/code.js
打开这个文件，里面你会发现一个<select>下拉列表的标签，这个表单正是我们在打开Kindeditor编辑面板，插入代码的时候，选择语言时所看到的下拉列表（步骤三所示）。这里如果你的网站页面不需要插入某些语言，可以在这里删掉一部分。

  

还有一个非常重要的部分，这些<option>标签中的value值即是生成的<pre>标签中class 属性中的“语言”的标识，那么这个里面的值跟SyntaxHighligher中能够解析的值有可能不一样，需要进行适当的修改。这里是我从SyntaxHighligher官网上截图下来的一张表，你需要解析什么语言，请将<option>中的value值修改成下表当中“Brush aliases”的值：





请再次对比这两张图片中class属性的值：

           

在下面的几行代码很重要，我们需要修改Kindeditor的地方如下：
改变之前：



改变之后：



注：保存之后，你再到编辑器中插入一段语言源码后，再查看生成的HTML代码，你会发现有可能还是不能正常显示，这有可能是因为浏览器缓存的原因，建议换一个浏览器或关闭浏览器之后重新打开（楼主在此纠结了很久）




六、将scripts和styles拿到Kindeditor文件夹下


        好了，Kindeditor已经处理好了，其中<pre></pre>中的class属性也完全按照SyntaxHighligher中的语法显示了。那么我们现在要做的就是将SyntaxHighligher中的js文件和CSS文件拿过来，加载到页面中就可以正常解析了。
        前面提到，其实有用的文件只有scripts和styles这两个，为了便于管理，我们将这两个文件夹拿到kindeditor组件的文件夹下。如下：

           

（无论你将这两个文件夹放在哪里，只要路径正确就OK了！）

七、在页面中加载有用的JS和CSS文件


        值得说明一下的是，scripts文件夹下有很多文件，其中每个.js文件都对应解析一种语言文件，例如你想要解析PHP语言，那么你的显示页面中必需要包含shBrush Php .js文件。如果你在第五步中，删除了某些不需要的值 ，那么也可以删除这个文件夹下面对应的某些文件。例如如果你不需要解析Java语言，那么这个下面shBrushJava.js文件是不必要的。
        这个里面shCore.js核心文件是必需的， 另外由于我们不知道用户在文本中插入的是什么语言的源代码，为了保险起见，我们需要加载所有的.js解析文件。
        但如果你像前面所说，有些语言是不需要解析的，你可以对照着上面给出的那张表，不需要加载某些不必要的文件，以免影响页面加载速度，不过，这个文件夹下所有的文件加起来也不是很大，大约150KB。

        针对styles文件夹，里面的shCore.js文件是必须的，其它的可以选择加载，根据你自己中意的风格，只需要加载一个主题文件即可，参照index.php，这里我把我需要解析的语言的文件加载到我的显示页面中：

         必须提醒的是，请不要在页面的HEAD头部加载这些页面 ，像首页这样的文件是不需要这些文件的，以免加大带宽，影响用户体现，建议在需要输出文章内容的地方加载这些文件。




八、最后我们在页面加加入如下JS代码
        像index.html中的示例一样，在你的页面中加入这段代码：
<script type="text/javascript">

         SyntaxHighlighter.all();
</script>

九、完成