IndianTechnoEra: Code Blocks Copy Button Functionality for Blogspot

Adding Copy Button Functionality to Code Blocks on Your Blog

In this tutorial, we'll learn how to enhance your blog by adding a convenient copy button to your code blocks. This feature allows your readers to easily copy code snippets with just a click, enhancing their experience and making your content more accessible.

Why Add a Copy Button?

Many readers find it cumbersome to manually select and copy code from code blocks. By adding a copy button, you streamline this process, making it more user-friendly. It's a small but impactful improvement that can greatly enhance the usability of your blog.

Let's Get Started

We'll walk through the steps to add a copy button functionality to code blocks on your blog using HTML, CSS, and JavaScript.

HTML Structure Test

Put your code solution here

CSS Styling

This CSS simply ensures that our copy button looks presentable, without interfering with the existing styles of your blog.

JavaScript Logic

This JavaScript code dynamically adds a copy button within each <pre><code>

Method 1: With Button tag

One simple method is that we can use another button tag after the pre and code tag.

HTML Structure

<div class="code-container">
      <pre><code>Put your code solution here</code></pre>
      <button class="copy-button">Copy</button>
  </div>

CSS Styling

.code-container {
  position: relative;
}

.copy-button {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

pre {
  background-color: #f8f8f8;
  padding: 10px;
  border-radius: 5px;
  overflow-x: auto;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const buttons = document.querySelectorAll('.copy-button');

  buttons.forEach(button => {
    button.addEventListener('click', () => {
      const codeBlock = button.previousElementSibling;
      const codeText = codeBlock.textContent;

      // Create a temporary textarea to copy the code text
      const textarea = document.createElement('textarea');
      textarea.value = codeText;
      textarea.setAttribute('readonly', '');
      textarea.style.position = 'absolute';
      textarea.style.left = '-9999px';
      document.body.appendChild(textarea);
      
      // Copy the code text from the textarea
      textarea.select();
      document.execCommand('copy');

      // Remove the temporary textarea
      document.body.removeChild(textarea);

      // Change button text to indicate successful copy
      button.textContent = 'Copied!';
      setTimeout(() => {
        button.textContent = 'Copy';
      }, 2000); // Reset button text after 2 seconds
    });
  });
});

Method 2: With adding class in code tag

Another method is to provide a class name with <code> tag.

HTML Structure

<pre>
  <code class="code-block" >Put your code solution here</code>
</pre>

CSS Styling

  pre {
  position: relative;
}

.copy-button {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const codeBlocks = document.querySelectorAll('code.code-block');

  codeBlocks.forEach(codeBlock => {
    const copyButton = document.createElement('button');
    copyButton.textContent = 'Copy';
    copyButton.classList.add('copy-button');
    codeBlock.parentElement.appendChild(copyButton);

    copyButton.addEventListener('click', () => {
      const codeText = codeBlock.textContent;

      // Create a temporary textarea to copy the code text
      const textarea = document.createElement('textarea');
      textarea.value = codeText;
      textarea.setAttribute('readonly', '');
      textarea.style.position = 'absolute';
      textarea.style.left = '-9999px';
      document.body.appendChild(textarea);

      // Copy the code text from the textarea
      textarea.select();
      document.execCommand('copy');

      // Remove the temporary textarea
      document.body.removeChild(textarea);

      // Change button text to indicate successful copy
      copyButton.textContent = 'Copied!';
      setTimeout(() => {
        copyButton.textContent = 'Copy';
      }, 2000); // Reset button text after 2 seconds
    });
  });
});

Method 3: Without another button or class

The best method is without any third button or another class name only putting the content in <pre> and <code> tag.

HTML Structure

<pre>
  <code >Put your code solution here</code>
</pre>

CSS Styling

pre {
  position: relative;
}

.copy-button {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const codeBlocks = document.querySelectorAll('pre code');

  codeBlocks.forEach(codeBlock => {
    const copyButton = document.createElement('button');
    copyButton.textContent = 'Copy';
    copyButton.classList.add('copy-button');
    codeBlock.parentElement.appendChild(copyButton);

    copyButton.addEventListener('click', () => {
      const codeText = codeBlock.textContent;

      // Create a temporary textarea to copy the code text
      const textarea = document.createElement('textarea');
      textarea.value = codeText;
      textarea.setAttribute('readonly', '');
      textarea.style.position = 'absolute';
      textarea.style.left = '-9999px';
      document.body.appendChild(textarea);

      // Copy the code text from the textarea
      textarea.select();
      document.execCommand('copy');

      // Remove the temporary textarea
      document.body.removeChild(textarea);

      // Change button text to indicate successful copy
      copyButton.textContent = 'Copied!';
      setTimeout(() => {
        copyButton.textContent = 'Copy';
      }, 3000); // Reset button text after 2 seconds
    });
  });
});