ブログのpreにコピーボタンつける

　素朴に button をつけて pre の innerText を textarea に入れてコピーする感じで書いた。たまに便利。

こういう感じ

/* pre に copy ボタンつける */
[...document.querySelectorAll('article.entry pre')]
.map(pre => {
  const button = document.createElement('button');
  pre.parentNode.insertBefore(button, pre);
  button.textContent = 'copy';
  button.classList.add('hogashi-pre-copy');
  let timer;
  button.addEventListener('click', () => {
    const textarea = document.createElement('textarea');
    pre.appendChild(textarea);
    textarea.value = pre.innerText;
    textarea.select();
    document.execCommand('copy');
    pre.removeChild(textarea);
    button.textContent = 'copied';
    clearTimeout(timer);
    timer = setTimeout(() => {
      button.textContent = 'copy';
    }, 500);
  });
});

.entry .entry-inner pre {
  padding-top: 20px;
}
button.hogashi-pre-copy {
  top: 20px;
  left: calc( 100% - 34px );
  position: relative;
  padding: 2px;
  font-size: .8em;
  cursor: pointer;
}