How to add copy code button on HUGO highligh code block

function addCopyButtonToCodeBlocks() {
    // Get all code blocks with a class of "language-*"
    const codeBlocks = document.querySelectorAll('code[class^="language-"]');

    // For each code block, add a copy button inside the block
    codeBlocks.forEach(codeBlock => {
        // Create the copy button element
        const copyButton = document.createElement('button');
        copyButton.classList.add('copy-code-button');
        copyButton.innerHTML = '<i class="far fa-copy"></i>';

        // Add a click event listener to the copy button
        copyButton.addEventListener('click', () => {
            // Copy the code inside the code block to the clipboard
            const codeToCopy = codeBlock.innerText;
            navigator.clipboard.writeText(codeToCopy);

            // Update the copy button text to indicate that the code has been copied
            copyButton.innerHTML = '<i class="fas fa-check"></i>';
            setTimeout(() => {
                copyButton.innerHTML = '<i class="far fa-copy"></i>';
            }, 1500);
        });

        // Add the copy button to the code block
        codeBlock.parentNode.insertBefore(copyButton, codeBlock);
    });
}