How to Add Double Click Copy Code Boxes to Your Blog

If you are a blogger writing about coding, you understand the importance of sharing code snippets with your readers. However, simply displaying the code is not sufficient, you also want to make it easy for them to copy it.

Table of Contents

That is where the double click to copy code container comes in. With this feature, users can quickly copy code snippets to their clipboard with just a double click. It makes your blog more user friendly and engaging for everyone.

What is a Double Click Copy Code Container?

A double click copy code container is a handy tool that allows you to easily copy code directly from our blog. When you double-click on a code block, the entire code is automatically copied to your clipboard. This feature is especially useful for those who are learning to code or need quick solutions, as it saves you time.

How To Set Up In Blogger

step 1:

To style your containers, just copy below CSS and javascript code.
step 2:

Copied code insert just above the </body> tag in edit html section in your theme.

CSS and Script Code

<b:if cond='data:view.isPost'>
<style>
.BgIstr-code-container {
  width: 90%;
  background-color: #1e1e1e;
  color: #ffffff;
  border-radius: 5px;
  padding: 20px;
  margin: 20px 0;
  position: relative;
  font-family: monospace;
}

.code-block {
  font-family: monospace;
  font-size: 14px;
  overflow-x: auto;
}

.code-block:hover {
  cursor: pointer;
  background-color: green;
}

.copied-message {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 12px;
  color: indigo;
  display: none;
}
</style>
<script>
  document.querySelectorAll('.code-block').forEach(block => {
    block.addEventListener('dblclick', function() {
      const code = this.querySelector('code').innerText;
      navigator.clipboard.writeText(code).then(() => {
        showCopiedMessage(this);
      }).catch(err => {
        console.error('Failed to copy: ', err);
      });
    });
  });

  function showCopiedMessage(block) {
    let message = document.createElement('span');
    message.className = 'copied-message';
    message.innerText = 'Copied!';
    block.appendChild(message);
    message.style.display = 'block';

    setTimeout(() => {
      message.style.display = 'none';
      block.removeChild(message);
    }, 1000);
  }
</script>
</b:if>
    

Add Html Code Snippets In Post

Step 3:

Insert the below given HTML code where you want the code snippets in your post.

HTML Code

<div class="BgIstr-code-container">
  <pre class="code-block">   
<code id="code1">... insert your Html Code here....</code>
  </pre>
</div>
    

If you want to add multiple code snippets to your blog post, make sure to change id="code1" to id="code2" for the second snippet, id="code3" for the third and so on. This is important to ensure each code block functions properly.

Advantages You To Use This

1. Easy To Use:

   This feature makes it easy for your readers to copy code, improving their experience on your blog.

2. Increased Engagement:

   When your blog is convenient to use, readers are more likely to come back for more.

3. Modern Look:

   Adding interactive elements gives your blog a professional look.

How To Redesign Style Code

In the first code snippet above, you will notice the copied message section. You can easily change the color: indigo; to red, blue or any other color you prefer. Similarly in the code-block:hover section, you can change the background-color: green; to any color you like to match your style.

Final Summary

By adding the double click to copy code feature on our blog, you can easily copy any code snippet with just a double click. This makes it simple for you to grab the code you need and also gives our blog a fresh and modern look.