A Step-By-Step Guide to Implement The "Copy Code" Feature

To add a "Copy Code" button like the one used here to your Blogger website, you can enhance the existing Highlight.js setup by using JavaScript and a bit of CSS. Here's a step-by-step guide to implement the "Copy Code" feature.

Steps to Add a "Copy Code" Button:

1. Add Highlight.js for Syntax Highlighting

   You're already using Highlight.js, so no need to change this. Make sure you're including both the script and the CSS:

   
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/dark.min.css">
   <script>hljs.highlightAll();</script>
   

2. Add HTML for the Code Block with Pre/Code Tags

   When you add code blocks in Blogger, wrap them in <pre> and <code> tags. You should also ensure that the language class is properly set for Highlight.js:

   
   <pre><code class="language-js">
   

// Example code here console.log('Hello, world!'); </code></pre>

3. Add CSS for the "Copy Code" Button 

You can add some custom CSS to position the "Copy Code" button over each code block:

<style>
.code-container {
    position: relative;
}
.copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #4d4646;
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 5px;
}
.copy-btn:hover {
    background-color: #000000;
}
</style>

4. Add the "Copy Code" JavaScript Logic

   You need to write JavaScript to create the "Copy Code" button and handle the copy functionality. Add this script at the end of the HTML code:

   <script>
   // Function to create and add "Copy" button to each code block
   document.addEventListener("DOMContentLoaded", function() {
       document.querySelectorAll('pre code').forEach(function(codeBlock) {
           // Create a container to wrap the pre/code block
           var container = document.createElement('div');
           container.className = 'code-container';
           codeBlock.parentNode.parentNode.insertBefore(container, codeBlock.parentNode);
           container.appendChild(codeBlock.parentNode);
   
           // Create the copy button
           var button = document.createElement('button');
           button.className = 'copy-btn';
           button.innerHTML = 'Copy';
           container.appendChild(button);
   
           // Add click event listener to copy the code
           button.addEventListener('click', function() {
               var code = codeBlock.innerText;
               var textarea = document.createElement('textarea');
               textarea.value = code;
               document.body.appendChild(textarea);
               textarea.select();
               document.execCommand('copy');
               document.body.removeChild(textarea);
   
               // Change the button text to indicate success
               button.innerHTML = 'Copied!';
               setTimeout(function() {
                   button.innerHTML = 'Copy';
               }, 2000);
           });
       });
   });
   </script>
   

5. Final Example with Code Block

Here's a complete example with a code block, Highlight.js, the copy button, and the necessary JavaScript:

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/dark.min.css">
<script>hljs.highlightAll();</script>

<style>
.code-container {
    position: relative;
}
.copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #4d4646;
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 5px;
}
.copy-btn:hover {
    background-color: #000000;
}
</style>

<pre><code class="language-js">
// Example code here
console.log('Hello, world!');
</code></pre>

<script>
document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll('pre code').forEach(function(codeBlock) {
        var container = document.createElement('div');
        container.className = 'code-container';
        codeBlock.parentNode.parentNode.insertBefore(container, codeBlock.parentNode);
        container.appendChild(codeBlock.parentNode);

        var button = document.createElement('button');
        button.className = 'copy-btn';
        button.innerHTML = 'Copy';
        container.appendChild(button);

        button.addEventListener('click', function() {
            var code = codeBlock.innerText;
            var textarea = document.createElement('textarea');
            textarea.value = code;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);

            button.innerHTML = 'Copied!';
            setTimeout(function() {
                button.innerHTML = 'Copy';
            }, 2000);
        });
    });
});
</script>

How This Works:

• CSS: The button is styled and positioned inside the .code-container to float above the code block.
• JavaScript: The script scans for every <pre><code> block, wraps it in a container, and appends a "Copy" button. On clicking the button, it copies the code to the clipboard.

Instructions to Add This to Blogger:

1. Open Blogger and go to the "Theme" section.
2. Click on "Edit HTML".
3. Paste the above code in the HTML section (preferably in the footer area before the closing </body> tag).
4. When adding code to your posts, make sure you wrap them inside <pre><code> tags.

This will enable the "Copy Code" button for all code blocks in your Blogger posts!