代码块高亮可复制显示是网站开发中一个常用的功能。highlight.js和clipboard.js都是常用的JS库，它们可以很好地实现代码块高亮、复制功能，两个库结合使用可以很好地提高网站的用户体验性。下面是整合highlight.js+clipboard.js的完整攻略，分为以下几个步骤：
步骤1 安装highlight.js和clipboard.js
首先需要在你的网站中安装highlight.js和clipboard.js库。可以使用npm进行安装，也可以直接在网址上下载相关文件。例如，使用npm安装可以使用以下命令：
npm install highlight.js -S
npm install clipboard -S
安装完成后，需要在JS文件中引入highlight.js和clipboard.js。示例代码如下：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
步骤2 设置highlight.js样式
设置highlight.js样式，可以通过以下方式进行：
<script>
hljs.configure({languages: []});
hljs.initHighlightingOnLoad();
</script>
其中hljs.initHighlightingOnLoad()方法会自动查找页面上所有的标签，并将其高亮显示。
步骤3 设置clipboard.js
定义要复制的元素以及设置复制成功后的提示信息可以如下设置：
<script>
new ClipboardJS('.btn');
document.querySelectorAll('pre code').forEach((block) => {
block.insertAdjacentHTML("beforebegin",
"<button class='btn' data-clipboard-target='#" + block.id + "'><i class='far fa-copy'></i></button>");
});
</script>
上述代码中定义了复制操作要触发的按钮样式，并为每个需要复制的代码块所在的标签添加了复制按钮。
步骤4 效果展示
最后，放上一个示例代码，以及代码块的样式展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>highlight.js+clipboard.js 整合展示</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
</head>
<body>
<pre><code id="example1" class="html">
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
</code></pre>
<pre><code id="example2" class="javascript">
function sayHello() {
console.log("Hello World!");
}
sayHello();
</code></pre>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
<script>
hljs.configure({languages: []});
hljs.initHighlightingOnLoad();
new ClipboardJS('.btn');
document.querySelectorAll('pre code').forEach((block) => {
block.insertAdjacentHTML("beforebegin",
"<button class='btn' data-clipboard-target='#" + block.id + "'><i class='far fa-copy'></i></button>");
});
</script>
</body>
</html>
以上就是使用highlight.js+clipboard.js整合并实现高亮、复制操作的完整攻略，可以在你的网站中灵活使用并提高用户使用体验。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：代码块高亮可复制显示js插件highlight.js+clipboard.js整合 - Python技术站
微信扫一扫 
支付宝扫一扫 
