百度编辑器 UEditor 用 highlight.js 库实现代码高亮

代码高亮

下载插件

首先下载highlight.js插件，可在本文页尾免费下载，或自行百度下载。

引用插件

将下载的压缩包解压，引用css和js（本文提供的附件中 monokai-sublime.css，是 sublime 编辑器的一种常用样式，自行下载的插件包 styles 文件夹有很多不同的样式库，也可以自己挑个自己喜欢的用）

添加代码

highlight.js 代码高亮遵循的格式是：

**

，而百度编辑器的代码语言模式生成的为

**

缺少 那一层，所以还要在页面加一段 js，循环往 pre 标签里添加 code 标签。如下：

    var allpre = document.getElementsByTagName("pre");
    for(i = 0; i < allpre.length; i++) 
    {
        var onepre = document.getElementsByTagName("pre")[i];
        var mycode = document.getElementsByTagName("pre")[i].innerHTML;
        onepre.innerHTML = ''+mycode+'';
    }

至此，基本的代码高亮显示效果就制作完成了，如果还想在代码框中增加一键复制功能，可继续按照以下教程开发。

一键复制

下载插件

首先下载clipboard.js插件，可在本文页尾免费下载，或自行百度下载。

引用插件

将下载的压缩包解压，引用js

添加代码

将代码高亮那一步中添加的代码，循环插入 的代码改为以下代码（在 code 层前面增加了一个 button）

    var allpre = document.getElementsByTagName("pre");
    for(i = 0; i < allpre.length; i++) 
    {
        var onepre = document.getElementsByTagName("pre")[i];
        var mycode = document.getElementsByTagName("pre")[i].innerHTML;
        onepre.innerHTML = 'COPY'+mycode+'';  //在 code 层前面增加了一个 button
    }

为 pre 循环增加 id，并为 pre 内的 button 增加 data-clipboard-target 属性

添加官方demo中的复制代码

复制按钮的css样式，添加到你的css文件中

pre {
position: relative; 
}
pre .btn{ 
display: none;
position: absolute;
top:0;
right: 0;
background: #333;
color: #9c9c9c;
border: 1px solid #232323;
}
pre .btn:hover{ 
color: #fff
}
pre:hover .btn{
display: block;
}

至此，代码高亮加一键复制功能就全部完成了。

教程附件