RIPRO美化-pre标签文本新增复制代码功能

写文章的时候，作为一名专业的码农，经常会在文章中粘贴一些代码。对于少许的代码块复制还行，但是对于代码块比较长的，如果需要复制这段代码就比较麻烦。像其他比较专业的博客系统，都会在代码块上有一个复制代码的按钮功能，用来快速复制整个代码块的代码，省时省力。于是我也想给我的博客增加一个这个功能，话不多说，安排起来。

实现思路

1. 在页面加载完成之后，使用 js 给每个 pre 标签增加一个按钮“复制代码”；
2. 给按钮增加点击事件，点击事件的功能就是复制代码块的内容。

实现代码

CSS 部分

btn-pre-copy 是 pre 标签中使用 js 增加的“复制代码”按钮。css 的作用是让他显示在 pre 标签的右上角。这里要注意 pre 标签和按钮中 position 属性。

.code-toolbar {
    position: relative;
}

pre .btn-pre-copy {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    color: hsla(0,0%,54.9%,.8);
    transition: color .1s;
}

js 部分

js 部分主要是给pre标签增加按钮和实现拷贝部分，我这里拷贝部分的实现是先实例化一个临时的节点textarea，然后把pre的内容设置进这个临时节点，然后选中内容进行复制，最后销毁这个节点。具体参考代码。

注意：js 部分有依赖于 jquery。