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');
  })
  
}