设置: 不支持文本选中

Copy1user-select: none;

可以搭配光标形状设置

便签

简书 - CSS禁止选中文本

当前的代码框渲染逻辑

使用 Hugo 提供的 render-codeblock.html , 完整路径 themes/tess/layouts/_default/_markup/render-codeblock.html

区分文本和代码

因为文本仅作演示和输出说明, 不需要支持拷贝

实现

在代码框右侧添加按钮, 点击实现拷贝

1. 代码框文本保存到属性 code-text
   
2. 点击按钮触发 javascript 函数 copyToClipboard 的调用
   

Copy1<pre data-lang={{ $text }} class="pre-lang bg-dark my-4"><button class="copy-code text-success" code-text={{ .Inner }} onclick="copyToClipboard()">Copy</button>{{ $result.Inner }}</pre>

pre 之间的换行会导致间隙

按钮样式

• 居右
  
• 无背景
  
• 圆角灰色边框
  
• 调小字体
  

Copy1.copy-code {
2  float: right;
3  background-color: transparent;
4  border: 1px solid gray;
5  border-radius: 0.2rem;
6  display: inline;
7  font-size: 12px;
8}

文本颜色由 text-success 决定, 是 bootstrap 类属性

回调函数实现

在 html 中嵌入 javascript 代码

1. 将代码写入剪贴板
   
2. 成功或失败, 修改按钮文本和样式以显示提示信息; 开启定时器恢复按钮文本, 清除样式
   

Copy 1<script type="text/javascript">
 2function copyToClipboard() {
 3    var copyButton = event.currentTarget;
 4    var codeContent = copyButton.getAttribute("code-text");
 5    // alert(codeContent);
 6    var timeout = 1600;
 7
 8    navigator.clipboard.writeText(codeContent).then(() => {
 9        copyButton.setAttribute("style", "border: 0px solid gray;");      
10        copyButton.innerHTML = "Content copied to clipboard!";
11
12        setTimeout(function (copyButton) {
13            copyButton.setAttribute("style", "");
14            copyButton.innerHTML = "Copy";
15        }, timeout, copyButton);
16
17        // console.log('Content copied to clipboard');
18        /* Resolved - 文本被成功复制到剪贴板 */
19    },() => {
20        copyButton.setAttribute("style", "border: 0px solid gray;");
21        copyButton.innerHTML = "Failed to copy!";
22
23        setTimeout(function (copyButton) {
24            copyButton.setAttribute("style", "");
25            copyButton.innerHTML = "Copy";
26        }, timeout, copyButton);
27
28        // alert("拷贝失败！");
29        // console.error('Failed to copy');
30        /* Rejected - 文本未被复制到剪贴板 */
31    });
32}  
33</script>

便签

-
Mozila - 居右
靠右总结
javascript - 定时器
js - 弹出框
设置剪贴板内容
js - onclick事件绑定的元素
html中嵌入js代码
按钮的onclick绑定
Hugo - Markdown render hooks