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

代码高亮

下载插件

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

引用插件

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

<!-- 引入css和js -->
<link rel="stylesheet" type="text/css" href="你的路径/monokai-sublime.css">
<script type="text/javascript" src="实际路径/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

添加代码

highlight.js 代码高亮遵循的格式是：<pre><code>**</code></pre>，而百度编辑器的代码语言模式生成的为 <pre>**</pre> 缺少 <code></code> 那一层，所以还要在页面加一段 js，循环往 pre 标签里添加 code 标签。如下：

<script type="text/javascript">
    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 = '<code id="mycode">'+mycode+'</code>';
    }
</script>

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

一键复制

下载插件

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

引用插件

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

<script src="实际路径/clipboard.min.js"></script>

添加代码

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

<script type="text/javascript">
    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 = '<button class="btn" data-clipboard-action="copy">COPY</button><code id="mycode">'+mycode+'</code>';  //在 code 层前面增加了一个 button
    }
</script>

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

<script>
  $("pre").each(function(){
   $(this).attr('id',"pre"+$(this).index());
    var btns = $(this).find("button");
     $(btns).attr('data-clipboard-target',"#pre"+$(this).index())
});
</script>

添加官方demo中的复制代码

<script>
    var clipboard = new ClipboardJS('.btn');
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
</script>

复制按钮的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;
}

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

教程附件

天客隆模板网管理员

扫码免费体验 GPT-4 链接