百度编辑器(UEditor)结合highlight.js实现代码高亮显示

之前开发自己的个人博客，苦苦寻找使代码高亮的方法，因为公司项目百度编辑器用的比较多，也就没去折腾研究其他的编辑器，使百度编辑器代码高亮的方法网上一搜一大片，基本上全是在页面里引入下面这些：

虽然可以实现代码高亮，但是是这种效果，并不是我想要的（盗一张白大神的图，不好意思~~）

我想要的是类似csdn这种黑色背景的代码高亮显示，经过各种查找比较，最终使用了highlight.js这个插件来实现效果

首先到官网去下载这个插件：https://highlightjs.org/download/

选择好语言 Download下载

解压后目录结构如下：

下面写一个例子来使用highlight.js实现代码高亮显示：

（这里引入的是我csdn用的同款主题：tomorrow-night-eighties）

 




	

	
/**
 * 二维数组按照指定字段进行排序
 * @params array $array 需要排序的数组
 * @params string $field 排序的字段
 * @params string $sort 排序顺序标志 SORT_DESC 降序；SORT_ASC 升序
 */
function arraySequence($array, $field, $sort = 'SORT_DESC') {
    $arrSort = array();
    foreach ($array as $uniqid => $row) {
        foreach ($row as $key => $value) {
            $arrSort[$key][$uniqid] = $value;
        }
    }
    array_multisort($arrSort[$field], constant($sort), $array);
    return $array;
}

显示效果如下：

这里使代码高亮遵循的格式是：

你的代码

而百度编辑器默认的代码块显示格式为：

你的代码

所以我试图在ueditor.all.js里面给pre标签嵌套code标签，结果没什么卵用

于是下面这段js代码诞生了，循环往pre标签里添加code标签

（这句话是后加的......网上剽窃我这段js代码不注明出处的，你们的良心不会痛吗？做程序员要有修养滴）

我们还可以给代码块自定义样式，例如：代码块宽度、字体大小、行高、不强制换行等等