avatar

tetsai

原创声明

本文由tetsai原创,转载请注明来源

其实非常简单,只需要在网页添加以下javascript代码即可实现:

<script>
function loadScript(src, callback) {
  var script = document.createElement('script'),
    head = document.getElementsByTagName('head')[0];
  script.type = 'text/javascript';
  script.charset = 'UTF-8';
  script.src = src;
  if(!callback) callback=function(){};
  if (script.addEventListener) {
    script.addEventListener('load', function () {
      callback();
    }, false);
  } else if (script.attachEvent) {
    script.attachEvent('onreadystatechange', function () {
      var target = window.event.srcElement;
      if (target.readyState == 'loaded') {
        callback();
      }
    });
  }
  head.appendChild(script);
}
function loadCSS(href){
    var css=document.createElement("link");
    css.rel="stylesheet";
    css.href=href;
    document.getElementsByTagName('head')[0].appendChild(css); 
}
//寻找所有code标签,加**按钮鸭!
var codes=document.getElementsByTagName('code');
if(codes.length){
    for(var i=0;i<codes.length;i++){ 
        var code_id="code_id_"+i;
        var btn = document.createElement("button");
        btn.setAttribute("class", "copy_btn");
        btn.setAttribute("data-clipboard-target", "#"+code_id);
        codes[i].setAttribute("id", code_id);
        btn.innerHTML='**代码';
        codes[i].parentNode.insertBefore(btn,codes[i]);
    }
    loadScript("//cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js",function(){
        var cop=new ClipboardJS('.copy_btn');
        cop.on('success', function(e) {
            alert("**成功了呀~~~~");
            e.clearSelection();
        });
        cop.on('error', function(e) {
            alert("矮油,**失败了,但是已经全选了惹...手动**吧勇士!");
        });
    });
    loadScript("//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/highlight.min.js",function(){hljs.initHighlightingOnLoad();});
    loadCSS("//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/solarized-dark.min.css");
}
</script>

注意事项!

代码功能

寻找所有的<code>标签,并分别添加"**代码"按钮,倘若你的网页并没有使用这个标签而是别的标签来包裹代码,则需要自行修改

//寻找所有code标签,加**按钮鸭!
var codes=document.getElementsByTagName('code');

中的'code'字符串,替换成相应的标签

**有行号的问题

想办法让**的内容不包含行号即可,可以参考clipboardjs的用法,自定义**的内容,让自定义**的内容没有行号就可以了

可选代码

其中以下代码仅仅是对代码进行染色,语法高亮的,倘若当前网页已经包含了代码主题,则无需重复渲染,请删除以下两行代码

loadScript("//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/highlight.min.js",function(){hljs.initHighlightingOnLoad();});
    loadCSS("//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/solarized-dark.min.css");

发表评论

电子邮件地址不会被公开。 必填项已用*标注