Blogspot给代码段添加复制按钮

之前我们实现了给代码段添加高亮.

但是如果一行太长, 就会这样. 用鼠标拖着去选择, 很不方便. 这时候如果有个复制按钮就好了.


之前一直以为很复杂. 今天既然又有冲动了, 就查一查吧.

找了一圈, 非常多的方案都是基于 < pre > < code > 的结构的, 没有找到基于仅 < pre > 元素的. 
再搜了一圈, 看来HTML的规范是推荐 pre code 嵌套匹配使用的.
那我们就改用 pre code 套着吧. 
小改一下 blockquote2pre.js 文件.

再找了一个比较好的复制按钮解决方案.
因为这个方案里面, 复制按钮上面不是文字, 也不是emoji, 而是用CSS画出来的图案. 不会遇到字符集的问题.

原始方案只要照抄引入CSS和JS就行了.
但是, 我们的环境比较特殊, 我们的 pre code 是用JS替换生成的.
所以我们要把添加复制按钮的动作放在生成了 pre code 之后.

所以我们找到JS文件的内容, 添加到我们的 blockquote2pre.js 文件中. 看不懂就看不懂, 反正复制粘贴就是了.

反正我们已经把JS内容添加到我们自己的代码里了, 一方面这个添加复制按钮的代码应该不会有BUG, 没有后期维护更新的考虑. 另一方面, 这是一个个人项目, 也说不准会不会哪天没了. 那么我们把CSS的部分也不要用链接的形式算了.

把CSS的内容写到blogspot的模板中.

搜索 "skin" 找到CSS的尾部. 添加这些CSS.
.copy-button {
    position: absolute;
    display: none;
    cursor: pointer;
    inset: 5px 5px auto auto;
    width: 1em;
    height: 1em;
    border: 1px solid;
    box-shadow: -3px 3px #999
}
:hover>.copy-button {
    display: inline-block
}
.copy-success {
    box-shadow: none;
    background-color: #999;
    transition: box-shadow .3s ease-out,background-color .3s ease-out
}
.copy-fail {
    border-style: dotted
}

========

Github: https://github.com/crazypeace/blogger-replace-blockquote-to-pre/


========

bonus

在这个大佬的博客里逛一逛, 发现他还有一篇文章. 
https://yihui.org/en/2023/08/css-scrollbar/
可以让代码块默认不换行, 显示水平滚动条; 但当鼠标移上去的时候, 就变成换行, 没有水平滚动行.

我们照抄就是了.

pre, pre:hover {
  white-space: pre-wrap;
  word-break: break-all;
}
pre code {
  display: block;
  overflow-x: auto;
}
@media only screen and (min-width: 992px) {
  pre { white-space: pre; }
}

评论

The Hot3 in Last 30 Days

ClouDNS .asia免费域名 托管到CloudFlare开CDN白嫖Websocket WS通道翻墙 / desec.io

无服务器 自建短链服务 Url-Shorten-Worker 完整的部署教程