在highlight.js代码块上添加复制按钮。这个功能将允许用户一键复制代码内容。
实现思路
自动检测页面上的highlight.js代码块
为每个代码块添加复制按钮
实现复制功能，并提供视觉反馈
确保按钮样式与代码块协调
最终实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highlight.js 代码块复制按钮</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css">
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
max-width: 900px;
margin: 0 auto;
padding: 20px;
background-color: #f8f9fa;
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
}
.code-container {
position: relative;
margin: 25px 0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.copy-btn {
position: absolute;
top: 8px;
right: 8px;
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 4px;
color: white;
padding: 6px 12px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s ease;
backdrop-filter: blur(5px);
z-index: 10;
}
.copy-btn:hover {
background: rgba(255, 255, 255, 0.3);
}
.copy-btn.copied {
background: #4CAF50;
}
pre {
margin: 0;
padding: 16px;
overflow-x: auto;
}
.example-section {
background: white;
border-radius: 8px;
padding: 20px;
margin-bottom: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.example-section h2 {
color: #2c3e50;
border-bottom: 1px solid #eaeaea;
padding-bottom: 10px;
margin-top: 0;
}
.instructions {
background: #e8f4fd;
border-left: 4px solid #2196F3;
padding: 15px;
margin: 20px 0;
border-radius: 0 4px 4px 0;
}
footer {
text-align: center;
margin-top: 40px;
color: #7f8c8d;
font-size: 14px;
}
</style>
</head>
<body>
<h1>Highlight.js 代码块复制按钮</h1>
<div>
<p>以下代码块已添加复制按钮，点击按钮即可复制代码内容。</p>
</div>
<div>
<h2>JavaScript 示例</h2>
<div>
<pre><code>// 这是一个JavaScript示例
function greet(name) {
console.log(`Hello, ${name}!`);
}
// 调用函数
greet("World");
// 箭头函数示例
const multiply = (a, b) => a * b;
// 使用箭头函数
const result = multiply(5, 3);
console.log(result);</code></pre>
</div>
</div>
<div>
<h2>HTML 示例</h2>
<div>
<pre><code><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例页面</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div>
<h1>欢迎来到示例页面</h1>
<p>这是一个简单的HTML页面示例。</p>
</div>
</body>
</html></code></pre>
</div>
</div>
<div>
<h2>CSS 示例</h2>
<div>
<pre><code>/* 基础样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f8f9fa;
}
/* 卡片组件样式 */
.card {
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-bottom: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}
/* 按钮样式 */
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #3498db;
color: white;
text-decoration: none;
border-radius: 4px;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #2980b9;
}</code></pre>
</div>
</div>
<footer>
<p>Highlight.js 代码块复制按钮示例 © 2023</p>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>
// 初始化highlight.js
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightElement(block);
// 为每个代码块添加复制按钮
const pre = block.parentNode;
const button = document.createElement('button');
button.className = 'copy-btn';
button.textContent = '复制';
button.setAttribute('aria-label', '复制代码');
pre.style.position = 'relative';
pre.appendChild(button);
// 添加复制功能
button.addEventListener('click', async () => {
try {
await navigator.clipboard.writeText(block.textContent);
// 复制成功反馈
button.textContent = '已复制!';
button.classList.add('copied');
// 2秒后恢复按钮文本
setTimeout(() => {
button.textContent = '复制';
button.classList.remove('copied');
}, 2000);
} catch (err) {
console.error('复制失败:', err);
button.textContent = '复制失败';
// 2秒后恢复按钮文本
setTimeout(() => {
button.textContent = '复制';
}, 2000);
}
});
});
});
</script>
</body>
</html>功能说明
自动检测代码块：脚本会自动查找页面上的所有highlight.js代码块
添加复制按钮：每个代码块的右上角会有一个"复制"按钮
复制功能：点击按钮会将代码内容复制到剪贴板
视觉反馈：
复制成功后按钮会变为"已复制!"并显示绿色背景
2秒后按钮恢复原状
复制失败时会显示"复制失败"
使用说明
将此代码保存为HTML文件并在浏览器中打开
点击代码块右上角的"复制"按钮
按钮会短暂显示"已复制!"，表示代码已成功复制到剪贴板
您可以将此功能集成到任何使用highlight.js的网站中
这个实现使用了现代JavaScript API（Clipboard API）来实现复制功能，并提供了良好的视觉反馈，确保用户体验流畅。
