<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>