How To Add Code Box With Clipboard Copy Button (using HTML, CSS & JS)

Adding a code box with a clipboard copy button to a website or web application can be a useful feature for developers and users alike. By allowing users to easily copy code snippets, you can save them time and make it easier for them to use the code in their own projects. In this article, we’ll go over the steps to add a code box with a clipboard copy button using HTML, CSS, and JavaScript.

Just follow the Steps as shown below.

1. Copy the below code and paste the HTML section of your post Editor.

<style>
      /* CSS for styling the code box */
      .code-box {
        background-color: #f1f1f1;
        padding: 10px;
        border-radius: 5px;
        font-family: monospace;
      }
    </style>

    <div class="code-box">
      <pre id="code">console.log('Hello, World!')</pre>
      <button id="copy-button" style="display: block; margin: 10px auto;">Copy to Clipboard</button>
    </div>

    <script>
      // JavaScript for adding the "Copy to Clipboard" functionality
      var copyButton = document.getElementById("copy-button");
      copyButton.addEventListener("click", function() {
        var code = document.getElementById("code").innerText;
        navigator.clipboard.writeText(code).then(function() {
          alert("Code copied to clipboard!");
        }, function(err) {
          console.error("Failed to copy code: ", err);
        });
      });
    </script>

2. Now you need to parse the HTML, CSS, or Javascript that you want to display in the code box. So, that it will show properly.

3. Just paste the code in our HTML Parse code Tool and Get the parse Code for the code box.

How to add code box with Clipboard button

4. Now paste the code in between the pre-tag and save the blog post. (As shown in the above screenshot)

Now the code box with the Clipboard button will be added to your Website.

Note: If you are using Blogger then switch to HTML view and in Wordpress use the custom HTML block.

If you want to add multiple code boxes in a single webpage then use the below code.

 <style>
      /* CSS for styling the code box */
      .code-box {
        background-color: #f1f1f1;
        padding: 10px;
        border-radius: 5px;
        font-family: monospace;
        margin: 10px 0;
      }
    </style>
    
    
    <div class="code-box">
      <pre id="code1">console.log('Hello, World!')</pre>
      <button id="copy-button1" style="display: block; margin: 10px auto;">Copy to Clipboard</button>
    </div>

    <div class="code-box">
      <pre id="code2">console.log('Welcome to the code box!')</pre>
      <button id="copy-button2" style="display: block; margin: 10px auto;">Copy to Clipboard</button>
    </div>

    <script>
      // JavaScript for adding the "Copy to Clipboard" functionality
      var copyButton1 = document.getElementById("copy-button1");
      copyButton1.addEventListener("click", function() {
        var code = document.getElementById("code1").innerText;
        navigator.clipboard.writeText(code).then(function() {
          alert("Code copied to clipboard!");
        }, function(err) {
          console.error("Failed to copy code: ", err);
        });
      });

      var copyButton2 = document.getElementById("copy-button2");
      copyButton2.addEventListener("click", function() {
        var code = document.getElementById("code2").innerText;
        navigator.clipboard.writeText(code).then(function() {
          alert("Code copied to clipboard!");
        }, function(err) {
          console.error("Failed to copy code: ", err);
        });
      });
    </script>

Here, You need to change the Id of the code box (Like Code1, Code2) and the Copy button (like copy-button1, copy-button2) as shown in the above code.

You can also change the background color of the code box and the buttons using the CSS codes. By default, it is taking the theme color for buttons, pre-tag, etc.

I hope you have successfully added a code box with a clipboard button in Both Blogger & Wordpress websites. If you have any doubts, do let me know in the comment section.