用Ueditor让网页支持代码语言显示

作为程序开发人员，经常需要在博客站上显示程序代码，如何让这些代码高亮显示，或者说显示的如同IDE编辑器中一样呢？Ueditor自带了这个功能，ThinkCMF也内置了该编辑器，让我们一起来看看怎么用吧。

首先，看看后台如何添加代码语言。其实也非常简单，在编辑文章的时候，点击工具栏上的“代码语言”，选择对应的代码，在出现的灰色编辑框中输入程序代码，例如：

此时，代码看起来是没有任何格式的，这很正常，点击编辑器左上角的 html 按钮，代码有这样一段：

说明代码语言其实是添加了一个样式，这个是Ueditor自己搞的，反正我是不知道怎么解析。不过这不重要，重要的是前端如何显示。

在 Ueditor 文档的“编辑内容展示”部分有明确说明，前端需要对代码进行解析。这很重要，我以前做的模板中就缺少了这部分，导致代码一直不能正确显示。解析有两点需要注意：

1. 在模板中引入 js 文件。

   请忽略我使用的路径，反正是引入这个 parse.js 就对了，我用的是ThinkCMF，所以是这么个引用方法，如果你是单独使用，写上你自己的路径。

2. 在文件的末尾，使用uParse来解析文档。按这个函数的用法，需要抓到内容的上级DOM容器，支持 css 选择器语法，如果你有多个容器，可以通过自定义的样式抓取，我是用 id，反正没有那么多容器。

   html文件中，存放内容的DOM：

   页面下方的js代码：

   $(function () {
   	uParse("#content",{rootPath: "__STATIC__/js/ueditor"});
   });

   uParse函数的第一个参数就是容器，第二个参数是设置，一般只设置“rootPath”就行了。这个参数是Ueditor目录位置，因此 Ueditor 要根据这个位置去查找其它插件，因此必须设置正确。当然，关于路径，原因和上边一样。

OK，现在就可以了，如果没有什么录入错误，应该就可以显示如下样式的代码了：

namespace app\portal\controller;
use cmf\controller\HomeBaseController;

class IndexController extends HomeBaseController
{
    public function index()
    {
        return $this->fetch(':index');
    }
}

重要提示：

Ueditor 的解析文件中有 BUG！这不是我瞎说，因为你如果真的按我上边说的去做了，你会发现，当你的文章中包含列表时，无论是有序列表还是无序列表，都会影响到导航栏的显示，这是因为 parse 文件中添加了 li 的样式，但它却是一个影响到全局的样式。网上也有解决办法，但偏偏你能百度到的办法，它们竟然也是错误的！错误是因为把选择器变量写错了，真是无语了。

正确的方法来了！

打开 ueditor.parse.min.js 文件，搜索并找到这段：li{clear:both;}，注意是蓝色部分。这是一完整的 javascript 字符串，需要打断，在 li 前边添加选择器，让样式只对选择器内部有效。在 li 前边，添加："+h+" ，后边的引号后还有一个空格，注意。为了更好地显示效果，在下边做一个对比吧。

另外，如果你的文件不是压缩的，文件名是 ueditor.parse.js，那么注意，不要使用变量 h，而是 selector。

修改前是这样的：

" ul{margin:0;padding:0;}li{clear:both;}"

修改之后是这样的：

	" ul{margin:0;padding:0;}"+h+" li{clear:both;}"
	//如果是未压缩的js文件，那么就是下边这样
	" ul{margin:0;padding:0;}"+selector+" li{clear:both;}"

喜欢刨根问底的朋友可能奇怪，为什么不是网上说的 c 而是 h 呢？因为在这句前边有这么一句：

h=this.selector;

我还能说什么呢？这难道不是很清楚了吗？