如何为网站代码块中的pre标签添加一个一键复制代码按钮？

本文共计674个文字，预计阅读时间需要3分钟。

参考其他比较专业的博客系统，许多都已在代码块上集成了一个复制代码的按钮。这用于快速复制整个代码块的内容。我也想给我的博客添加这个功能。注意：Chrome浏览器测试通过。其他浏览器尚未测试。

参考其他比较专业的博客系统，都在代码块上有一个复制代码的按钮。用来快速复制整个代码块的代码。于是我也想给我的博客增加一个这个功能。

注：chrome测试通过。其他浏览器未进行测试。

实现思路：

1、在页面加载完成之后，使用js给每个pre标签增加一个按钮“复制代码”

2、给按钮增加点击事件，点击事件的功能就是复制代码块的内容

实现代码：

css部分，btn-pre-copy是pre标签中使用js增加的“复制代码”按钮。css的作用是让他显示在pre标签的右上角。