typecho给代码块添加复制按钮

只有鼠标放到代码块，才会显示复制代码，鼠标从代码块移开，复制代码方框消失。支持一篇文章多个代码块的单独复制。

新建codecopy.js

在主题目录里面新建一个codecopy.js文件。在文件里放入以下代码：

var codeblocks = document.getElementsByTagName("pre")
//循环每个pre代码块，并添加 复制代码

for (var i = 0; i < codeblocks.length; i++) {
    //显示 复制代码 按钮
    currentCode = codeblocks[i];
    currentCode.style = "position: relative;";
    var copy = document.createElement("div");
    copy.style = "position: absolute;right: 4px;top: 4px;background-color: white;padding: 2px 8px;margin: 8px;border-radius: 4px;cursor: pointer;z-index: 9999;box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.05);";
    copy.innerHTML = "复制";
    currentCode.appendChild(copy);
    //让所有 "复制"按钮 全部隐藏
    copy.style.visibility = "hidden";
}


for (var i = 0; i < codeblocks.length; i++) {
    !function (i) {
        //鼠标移到代码块，就显示按钮
        codeblocks[i].onmouseover = function () {
            codeblocks[i].childNodes[1].style.visibility = "visible";
        }
        //执行 复制代码 功能
        function copyArticle(event) {
            const range = document.createRange();
            //范围是 code，不包括刚才创建的div
            range.selectNode(codeblocks[i].childNodes[0]);
            const selection = window.getSelection();
            if (selection.rangeCount > 0){selection.removeAllRanges();}
            selection.addRange(range);
            document.execCommand('copy');
            codeblocks[i].childNodes[1].innerHTML = "复制成功";
            setTimeout(function () {
                codeblocks[i].childNodes[1].innerHTML = "复制";
            }, 1000);
            //清除选择区
            if (selection.rangeCount > 0){selection.removeAllRanges();}
        }
        codeblocks[i].childNodes[1].addEventListener('click', copyArticle, false);
    }(i);
    !function (i) {
        //鼠标从代码块移开 则不显示复制代码按钮
        codeblocks[i].onmouseout = function () {
            codeblocks[i].childNodes[1].style.visibility = "hidden";
        }
    }(i);
}

引用codecopy.js

打开模板目录下的footer.php文件，在文件末尾的</body>前添加下面一行。

<script src="<?php $this->options->themeUrl();?>/codecopy.js"></script>

内容来源：http://www.laolion.com/archives/2554.html