博客园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;
  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

https://group.cnblogs.com/topic/81453.html


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM