Code blocks met copy knop

20 januari 2025

Voor technische blog posts is het handig om code voorbeelden te kunnen delen. Hier is hoe je eenvoudige code blocks met copy functionaliteit kunt toevoegen aan je statische website.

HTML structuur

De code block bestaat uit een container met een header en de code zelf:

HTML

<div class="code-block">
  <div class="code-header">
    <span>HTML</span>
    <button class="copy-btn" onclick="copyCode(this)">Copy</button>
  </div>
  <pre><code>Je code hier</code></pre>
</div>

CSS styling

Minimale styling voor een professionele uitstraling:

CSS

.code-block {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  margin: 1rem 0;
  position: relative;
}

.code-header {
  background: #e9ecef;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  color: #666;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.copy-btn {
  background: #555;
  color: white;
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.7rem;
}

JavaScript functionaliteit

Een simpele functie om code te kopiëren naar het klembord:

JavaScript

function copyCode(button) {
  const codeBlock = button.closest('.code-block');
  const code = codeBlock.querySelector('pre code').textContent;
  
  navigator.clipboard.writeText(code).then(() => {
    button.textContent = 'Copied!';
    button.classList.add('copied');
    setTimeout(() => {
      button.textContent = 'Copy';
      button.classList.remove('copied');
    }, 2000);
  });
}

Inline code

Voor korte code snippets kun je inline code gebruiken met de <code> tag.

Deze oplossing is lichtgewicht en werkt zonder externe bibliotheken. Perfect voor statische websites die snel moeten laden!