Blogspot给代码段添加复制按钮

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

https://zelikk.blogspot.com/2024/05/blogspot-code-prettify.html

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

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

找了一圈, 非常多的方案都是基于 < pre > < code > 的结构的, 没有找到基于仅 ＜ pre > 元素的. 

再搜了一圈, 看来HTML的规范是推荐 pre code 嵌套匹配使用的.

那我们就改用 pre code 套着吧. 

小改一下 blockquote2pre.js 文件.

再找了一个比较好的复制按钮解决方案.

https://yihui.org/en/2023/09/copy-button/

因为这个方案里面, 复制按钮上面不是文字, 也不是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; }

}