B2主题代码块添加一键复制和美化

美化图：

第一步：

CSS代码部分

/*为pre区域添加一键复制*
/i.yellow-i {
content: '';
position: absolute;
top: 0;
left: 25px;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 15px 25px;
background: #fdbc40;
z-index: 1;
}
i.green-i {
content: '';
position: absolute;
top: 0;
left: 50px;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 15px 25px;
background: #35cd4b;
z-index: 1;
}i.red-i {
content: '';
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 15px;
border-radius: 50%;
background: #fc625d;
margin: 15px 25px;
z-index: 1;
}.entry-content pre {
position: relative;
border-radius: 6px;
padding-top: 50px;
box-shadow: 0px 8px 20px -10px #000;
}/* 代码块容器样式，用于包装代码块和按钮 */.code-container {
    position: relative;
}
/* 复制按钮样式 */.copy-button {
    background-color: #00000000;
    color: #fff;
    border: none;
    padding: 10px 20px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

放在你的css文件里面只要能加载就可以比如style.css

第二步：

JavaScript代码部分

结语：

忘了原来是谁的代码了，我改良了一番(与其说改良，倒不如说完全重写，只是用了他的外观)，这下复制按钮一直固定在右上角，不会再跟着左右滚动了

修订记录
1、修复复制异常。

2、修复复制格式异常

3、修复手机浏览器无法复制，（目前手机QQ内置浏览器依然无法复制）