博客园Markdown编辑模式下代码复制功能
页面定制CSS代码:(复制按钮在鼠标移动到代码块上显示,鼠标移出后按钮不显示)
/*添加按钮*/
.cnblogs-markdown pre {
position: relative;
}
.cnblogs-markdown pre > span {
position: absolute;
top: 0;
right: 0;
border-radius: 2px;
padding: 0 10px;
font-size: 12px;
background: rgba(0, 0, 0, 0.4);
color: #fff;
cursor: pointer;
/*注释下面这一行,button一直显示*/
display:none;
}
.cnblogs-markdown pre:hover > span {
display:block;
}
.cnblogs-markdown pre > .copyed {
background: #67c23a;
}
页脚HTML代码:
<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/wuliytTaotao/cp.js"></script>
最好将文件https://blog-static.cnblogs.com/files/wuliytTaotao/cp.js
和 文件 https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js
拷贝到自己的博客园文件下。
PS:记得申请JS权限。
References
作者:wuliytTaotao
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。