为博客园markdown代码块添加折叠与复制按钮

selection 和 range

先放上MDN上的解释：selection， range

折叠功能好写，但是复制功能有些麻烦，最后查MDN解决了，兼容性还没有测试，简而言之，就是获取selection，创建一个range，把要复制的元素放到range里，由此获取要复制的文本，生成一个textarea并把文本填进去，用这个textarea执行select()，最后执行document.execCommand('copy')

css

#board{width: 0;height: 0;opacity: 0;}

js

var post = $('.post');

if (post) {
  $('.post>.postTitle').after($('.post>.postDesc'));
  var tgl = $('<button class="tgl">toggle</button>');
  var selcode = $(
    '<button class="selcode">select</button>');

  $('pre').prepend(selcode).prepend(tgl);

  $('pre').on('click', '.tgl', function () {
    window.scrollTo($(this).parent('pre').offset());
    $(this).siblings('code').toggle()
  })

  $('pre').on('click', '.selcode', function () {
    var sel = window.getSelection();
    sel.removeAllRanges();
    var range = document.createRange();
    range.selectNode($(this).siblings('.hljs')[0]);
    sel.addRange(range);
    var txt = sel.anchorNode.innerText;
    var area = $('<textarea name="" id="board" cols="30" rows="10"></textarea>');
    area.val(txt);
    area[0].select();
    document.execCommand('copy');
  })
  
}