在本教程中，我们将学习如何使用 Prism.js 通过复制代码按钮创建代码块。 Prism.js 是一个轻量级且可扩展的语法荧光笔，它使我们能够在网页上精美地格式化代码片段。添加复制代码按钮将增强用户体验，用户只需单击一下即可轻松将代码复制到剪贴板。
第 1 步：设置 HTML 结构
首先创建一个新的 HTML 文件并设置基本结构。我们将包含必要的样式表和脚本，以利用 Prism.js 和复制代码按钮功能。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
lang="en">
charset="UTF-8">
name=“视口” content=“宽度=设备宽度，初始比例=1.0”>
href=“https://cdn.jsdelivr.net/npm/prismjs@1.27.0/themes/prism.css” rel=“样式表”>
/* 代码块样式 */
pre {
position: relative;
padding: 1em;
背景颜色: #f0f0f0;
border: 1px solid #ddd;
边界半径: 4px;
}
code {
display: block;
字体系列: 《快递新》, 等宽字体;
}
/* 复制代码按钮样式 */
.复制代码按钮{
position: absolute;
top: 0.5em;
right: 0.5em;
padding: 0.5em 1em;
字体大小: 14px;
背景颜色: #333;
color: #fff;
border: none;
边界半径: 4px;
cursor: pointer;
}
风格>
头>
|
第 2 步：创建代码块和复制代码按钮
在 标签内，我们创建一个
元素来表示我们的代码块，并创建一个
|
函数问候（）{
console.log("你好，世界！");
}
class=“复制代码按钮”>Copy按钮>
前>
|
第 3 步：添加 Prism.js 库和复制代码按钮功能
要使代码块语法突出显示，请在 HTML 文件中包含 Prism.js 库。此外，添加一个脚本来处理复制代码按钮功能。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
src=“https://cdn.jsdelivr.net/npm/prismjs@1.27.0/prism.js”>脚本>
// 为每个复制代码按钮添加点击事件监听
document.查询选择器全部(“.复制代码按钮”).forEach(function(button) {
button.添加事件监听器("click", function() {
// 获取代码元素
var 代码元素 = this.父元素.查询选择器("code");
// 创建一个临时文本区域来复制代码
var textarea = document.创建元素(“文本区域”);
textarea.value = 代码元素.内部文本;
document.body.附加子项(textarea);
// 选择并复制代码
textarea.select();
document.执行命令("copy");
// 删除临时文本区域
document.body.删除子项(textarea);
// 将按钮文本更改为“已复制！”短期内
var 原文 = this.内部文本;
this.内部文本 = “复制了！”;
设置超时时间(function() {
button.内部文本 = 原文;
}, 1500);
});
});
脚本>
正文>
|
第 4 步：测试和定制
保存 HTML 文件并在 Web 浏览器中打开它。您应该看到带有复制代码按钮的代码块。当您单击“复制”按钮时，代码块内的代码将被复制到剪贴板，并且按钮文本将短暂更改为“已复制！”以供用户反馈。
您还可以看到现场演示在这里.
定制：
请随意修改代码块样式和按钮样式以匹配您网站的设计。您还可以使用不同的 Prism.js 主题来更改代码块的外观。
结论：
在本教程中，我们学习了如何使用 Prism.js 通过复制代码按钮创建代码块。这增强了网站上代码片段的可读性，并为用户复制代码示例提供了便捷的方式。尝试不同的样式和主题，使其完美适合您的网络项目。快乐编码！
