copy-code.html

<style>
.copy-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 4px 8px;
  font-size: 18px;
  background: #969696;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.copy-btn:hover {
  opacity: 1;
}

.copy-btn.copied {
  background: #636363;
}

pre {
  position: relative;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Find all code blocks
  const codeBlocks = document.querySelectorAll('pre code');
  
  codeBlocks.forEach(function(codeBlock) {
    const pre = codeBlock.parentElement;
    
    // Create copy button
    const button = document.createElement('button');
    button.className = 'copy-btn';
    button.textContent = '⎘';
    
    // Add button to pre element
    pre.appendChild(button);
    
    // Add click event
    button.addEventListener('click', function() {
      // Create temporary textarea to copy text
      const textarea = document.createElement('textarea');
      textarea.value = codeBlock.textContent;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
      
      // Update button text
      button.textContent = 'Copied!';
      button.classList.add('copied');
      
      // Reset button after 2 seconds
      setTimeout(function() {
        button.textContent = '⎘';
        button.classList.remove('copied');
      }, 2000);
    });
  });
});
</script>