Adding copy to clipboard support for highlight code blocks about hugo-book

[alex-shpak]

Hi!
I looked into adding copy button before, but as I try to keep everything simple I decided against it, it was too much of support for icons, code and light-dark theme,
But I can reconsider is simple (code wise) solution with arise.

[eskopp]

Hello @alex-shpak and @djsamperi,
I had the same problem. I made the following solution myself. The implementation is quite simple and so is the layout. Maybe you can add it to the original repo.
Greetings
@eskopp

Solution

Dark

Light

Source Code

JavaScript Code

<script>
  document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll('pre code').forEach((block) => {
      const button = document.createElement('button');
      button.className = 'copy-button';
      button.textContent = 'Copy';
      button.addEventListener('click', () => {
        const range = document.createRange();
        range.selectNodeContents(block);
        const selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand('copy');
        button.textContent = 'Copied!';
        setTimeout(() => { button.textContent = 'Copy'; }, 2000);
      });
      block.parentNode.insertBefore(button, block);
    });
  });
  </script>

CSS Code

.copy-button {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: #6c757d;
  color: white;
  font-family: Arial, sans-serif;
  font-size: 0.875rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transition: background-color 0.3s, box-shadow 0.3s;
}

.copy-button:hover {
  background-color: #5a6268;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}

pre {
  position: relative;
  background-color: #f8f9fa;
  border: 1px solid #e1e1e1;
  padding: 16px;
  border-radius: 4px;
  overflow: auto;
}