How To Create A Code Snippet Box with Click To Copy Button

Code Snippet Box with Click-to-Copy Button: A Must-Have for Your Blog

Code Snippet Box with Click-to-Copy Button: A Must-Have for Your Blog Image - Raul's Trick 

Code snippets are an essential part of any developer's life. They help you understand how things work and make it easy to copy and paste code into your own projects. But when it comes to displaying code in your blog posts, it can be a bit tricky. That's where code snippet boxes with click-to-copy buttons come in. In this article we will see how to create a code snippet box with click to copy button step by step.

Continue reading 

• Google Open Image Dataset V7 Now Use Loyalty Free Images
• Google Bard An Innovative Language Model

Why Displaying HTML Code in Your Posts is Important

When you're writing a technical blog post, displaying code snippets is crucial. It's an excellent way to share your knowledge and help others learn. Not only does it make your content more informative, but it also adds credibility to your writing.

Code snippets help readers understand how to implement the concepts you're discussing. They can also save time, as readers can copy and paste the code into their projects rather than typing it out manually.

However, displaying code in a clear and organized manner can be challenging. That's where code snippet boxes come in.

The Benefits of Displaying Code Snippet Box

A code snippet box is a container that holds your code and makes it easy for readers to read and copy. Here are some of the benefits of using a code snippet box in your blog posts:

Improved Readability: Code snippets can be hard to read if they're not formatted correctly. A code snippet box ensures that the code is easy to read and understand.

Easier to Copy: With a click-to-copy button, readers can quickly and easily copy the code from your post without having to manually select and copy the text.

Consistent Formatting: Code snippet boxes ensure that your code is consistently formatted throughout your post. This makes it easier for readers to follow along and understand the code.

Better SEO: Including code snippets in your blog posts can improve your SEO. When people search for code snippets related to your post, your blog post may appear in the search results.

How to Create a Code Snippet Box with Click-to-Copy Button?

Creating a code snippet box with a click-to-copy button is easy. Here's how you can do it:

Open a code editor and create your code snippet. Wrap your code snippet in a code block using the <code> HTML tag. Add the <pre> HTML tag before the <code> tag to preserve whitespace and line breaks.

Html

<div class="code-snippet">
    <pre>
        &lt;html&gt;
        &lt;head&gt;
            &lt;title&gt;My HTML Page&lt;/title&gt;
        &lt;/head&gt;
        &lt;body&gt;
            &lt;p&gt;This is some text.&lt;/p&gt;
        &lt;/body&gt;
        &lt;/html&gt;
    </pre>
    <button class="copy-button">Copy</button>
</div>

Create a class to your code block. For example, you can use the "language-css" class for CSS code.

CSS

.code-snippet {
    position: relative;
}

.copy-button {
    position: absolute;
    top: 5px;
    right: 5px;
}

To add a button next to your code block with the text "Copy."

Add JavaScript code to handle the click event of the "Copy" button. Use JavaScript

Finally Add JavaScript

const copyButton = document.querySelector('.copy-button');
const codeSnippet = document.querySelector('.code-snippet pre');

copyButton.addEventListener('click', () => {
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNodeContents(codeSnippet);
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand('copy');
    selection.removeAllRanges();
});

In this example, the code snippet is contained in a div with a class of "code-snippet". The copy button is added as a sibling to the pre tag. The CSS positions the button in the top-right corner of the code snippet.

The JavaScript adds a click event listener to the copy button. When the button is clicked, it selects the contents of the pre tag, copies it to the clipboard using the execCommand method, and then removes the selection. This allows the user to easily copy the HTML code to their clipboard with a single click.

Here's an example of what your HTML code could look like:

<div class="code-snippet">
  <pre><code>// Your code goes here</code></pre>
  <button class="copy-btn">Copy</button>
</div>
<style>
.code-snippet {
  position: relative;
  padding: 1em;
  background-color: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 1em 0;
}
.code-snippet pre {
  overflow: auto;
}
.code-snippet .copy-btn {
  position: absolute;
  top: 1em;
  right: 1em;
  border: none;
  background-color: #4CAF50;
  color: #fff;
  padding: 0.5em;
  border-radius: 4px;
  cursor: pointer;
}
.code-snippet .copy-btn:hover {
  background-color: #3e8e41;
}
.code-snippet.copied {
  border-color: #4CAF50;
  box-shadow: 0 0 0 2px #4CAF50;
}
</style>
<script>
const codeSnippets = document.querySelectorAll('.code-snippet');
codeSnippets.forEach((codeSnippet) => {
  const copyBtn = codeSnippet.querySelector('.copy-btn');
  const codeElm = codeSnippet.querySelector('code');
  copyBtn.addEventListener('click', () => {
    const range = document.createRange();
    range.selectNode(codeElm);
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand('copy');
    selection.removeAllRanges();
    codeSnippet.classList.add('copied');
    setTimeout(() => codeSnippet.classList.remove('copied'), 2000);
  });
});
</script>