Blogger给代码段添加复制按钮

点击标签看相关主题:
之前我们实现了给代码段添加高亮.

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


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

找了一圈, 非常多的方案都是基于 < 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

用浏览器 检测Reality伪装效果 是否搭建成功 排错Troubleshoot

图片
Reality的原理: 当 Reality 节点收到数据包的时候, 如果 Reality 协议的验证通过, 就走节点的翻墙逻辑; 如果 Reality 协议的验证不通过, 就把数据包转发到伪装站. 后续的整个交互过程就像是在和伪装站交互一样. 我们可以简单地用浏览器验证 Reality 伪装效果. 也相当于检测 从你自己到 Reality 节点之间的数据通路是否畅通. 以这样的一个 Reality 节点为例. IP  142.171.237.9 端口  18255 伪装站 learn.microsoft.com 在电脑的hosts文件中, 设置 learn.microsoft.com 解析的IP 为  142.171.237.9   然后在浏览器中, 访问 https://learn.microsoft.com: 18255 可以看到, TLS的锁是正常的. 验证证书, 也是正常的. 从你自己到Reality节点的数据路径是畅通的之后, 如果你的节点还不能用, 那么, 就应该检查你的Reality节点验证信息了 (UUID, 公钥) ======== update 如果是用了中转后的 Reality 节点 原 Reality 节点 IP  142.171.237.9 端口  18255 伪装站 learn.microsoft.com 中转 VPS  IP 142.171.223.56 端口 28828 那么, 在电脑的hosts文件中, 设置 learn.microsoft.com 解析的IP 为  142.171.223.56 然后在浏览器中, 访问 https://learn.microsoft.com: 28828 可以看到, TLS的锁是正常的. 验证证书, 也是正常的.
Read more »

用darkstat统计VPS上的流量

图片
感谢 https://0x3f.org/posts/darkstat-as-a-network-discharge-meter/ https://ilovn.com/2023/03/25/darkstat/ 安装 apt install -y darkstat 启用 darkstat -i 监听网卡 -p 网页端的端口号 如 darkstat -i eth0 -p 8964 页面端查看 http:// 你的vps的IP : 网页端的端口号 如 http:// 12.34.56.78 : 8964 效果类似下面这样 点 host 可以看到数字表格的统计信息. 点其中一条 可以看到更详细的信息. 能看到在本VPS上, 还有指定IP上, 分别用到了什么端口(包括TCP UDP), 以及分别跑了多少流量. 如果你有有更好的工具, 欢迎留言分享!
Read more »

233 sing-box 脚本 TCP 端口转发 Reality 协议 排错 Troubleshoot

图片
233 boy 的 TCP 端口转发的教程 https://233boy.com/sing-box/sing-box-direct/ 下图中示意, 左边的 142.171.237.9 是被墙的VPS, 右边的 142.171.223.56 是用来做端口中转的VPS. 如果你照着教程操作一遍, 发现不能正常使用. 那么本文指导你如何排查问题所在. ======== 首先, 你要理解整个原理是什么. 左边的, 本来的reality协议节点, 底层是TCP直连, 那么是从你的 翻墙客户端(手机/电脑/...) 去连接  142.171.237.9  的 18255 端口. 现在被墙了, 那么无法直接TCP连接了. 右边的, 用于中转的VPS, 设置的 TCP端口中转 的本质是,  142.171.223.56  从端口 28828 收到的TCP数据, 会转发给  142.171.237.9  的 18255 端口.  所以, 你现在可以把本来准备发送给  142.171.237.9  的  18255  端口 的realiy数据包, 发送给  142.171.223.56  的  28828  端口; 142.171.223.56  从端口  28828  收到的TCP数据, 转发给  142.171.237.9  的  18255  端口. ======== 我们延着数据路径一段一段的排查. 1. 从我们的翻墙客户端(手机/电脑/...)连接中转VPS  142.171.223.56  的  28828  端口; a) 可以用 tcp.ping.pe 检测 142.171.223.56  的  28828  端口是否正常; b) 在你自己的电脑  tcping 检测 142.171.223.56  的  28828  端口是否可连接. 2. 在中转VPS上查 sing-box 的 access.log cat /var/log/sing...
Read more »