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
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:
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> <html> <head> <title>My HTML Page</title> </head> <body> <p>This is some text.</p> </body> </html> </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>