前端实现代码高亮与一键复制功能：highlight.js与clipboard.js整合方案

实现该功能主要涉及两个核心方面：

第一是代码的高亮显示与自动换行处理；

第二是添加代码复制按钮功能；

针对这两个需求，目前已有成熟的开源插件可供选择。

首先介绍代码高亮插件：highlight.js。

第一步是获取highlight.js的JS文件。

访问官网 https://highlightjs.org/ 进行下载。

点击“get version”按钮进入语言支持选择界面。

勾选常用的编程语言，通常情况下选择“common”选项即可满足大多数需求。

点击“download”下载压缩包，解压后你会看到包含JS文件和CSS文件的目录。

其中，JS文件负责识别代码结构以实现高亮逻辑，CSS文件则负责定义代码块的颜色与背景样式。

第二步，在解压后的目录中找到 highlight.pack.js 文件，并在项目中引入该JS文件。

<script src="js/jquery-3.1.1.js"></script> 
<script src="js/highlight.pack.js"></script>

第三步，打开 styles 文件夹，里面包含多种主题CSS文件。这些文件用于自定义代码展示样式，包括高亮配色和背景色。

根据需求选择并导入对应的CSS文件即可应用主题。如果不确定各CSS文件对应的视觉效果，可访问 https://highlightjs.org/static/demo/ 查看在线演示。

本文示例中选用的是 dark.css 主题文件：

<link rel="stylesheet" type="text/css" href="css/dark.css" rel="external nofollow" />

成功引入JS和CSS文件后，即可开始使用高亮功能。

使用时必须注意，待展示的代码必须包裹在 <pre><code></code></pre> 标签结构中。

若代码内容中包含HTML标签字符，需将左尖括号“<”替换为“&lt;”，右尖括号“>”替换为“&gt;”，以避免解析错误。

接下来介绍代码复制插件：clipboard.js。

最初尝试使用 document.execCommand 实现复制功能，代码如下。结果发现该方法复制的内容无法保留换行和空格等格式，且存在浏览器兼容性问题。经过大量对比测试，最终选用现成的 clipboard.js 插件，它能更便捷、稳定地实现复制功能。

<script type="text/javascript">
function copyLink(){
var e = document.getElementById("copy");
e.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
alert("复制链接成功！");
}
</script>

clipboard.js 是一个纯JavaScript库，用于实现从浏览器到系统剪贴板的文本复制功能。

在集成过程中，前端浏览器控制台曾报错提示“Clipboard is not defined”。

起初误以为是变量未定义或源码有误，排查后发现是引入JS文件的路径配置错误（今后遇到类似未定义报错，建议优先通过F12开发者工具检查网络请求是否存在404错误）。

第一步，下载 clipboard.js。下载地址为：https://github.com/zenorocha/clipboard.js。

第二步，在项目中引入该插件。

下载解压后的文件 clipboard.js-master\clipboard.js-master\demo 目录中提供了使用示例，可直接参考。

以下是复制 id 为 copyCode 的div内容的具体实例：

1）引入JS文件

<script src="${ctx }/styles/js/clipboard.min.js" type="text/javascript" ></script>

2）实例化ClipboardJS对象

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

3）定义触发复制的按钮及目标内容（注意：触发复制事件的按钮需添加两个属性：data-clipboard-action 和 data-clipboard-target，其中 data-clipboard-target 的值应为目标文本元素的ID）。

<div id="copyCode">hello</div> <button class="btn" data-clipboard-action="copy" data-clipboard-target="#copyCode">Copy</button>

需注意，data-clipboard-target 的值也可以是标签选择器，但如果页面中存在多个匹配标签，该功能将失效，请谨慎使用。

经测试，上述两个插件在结合使用时互不冲突，可以良好地融合在一起。