博客园美化 | part04-添加代码复制按钮

1、将下方代码添加代码到博客园中设置选项里面的页面定制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;
}

2、申请JS权限;

3、将下方代码粘贴到页脚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>

REF: 博客园设置代码复制按钮

posted @ 2021-07-12 19:44  茶哩哩  阅读(125)  评论(0编辑  收藏  举报