Source

static/scripts/copycode.js

/**
 * This script adds a copy button to all pre elements with the prettyprint class.
 * When the button is clicked, the code content will be copied to the clipboard.
 * @function addCopyButton
 * @returns {void}
 * @example
 * addCopyButton()
 * @tutorial copy-code
 * @author Sherif Butt
 * @mermaid 
 *  graph LR
 *    A((Document)) --> B(querySelectorAll<br>pre prettyprint);
 *    B --> C(forEach);
 *    C --> D(Create a<br>new button<br>element);
 *    D --> E(Add an event<br>listener to<br>copy the<br>code content<br>when the button<br>is clicked);
 *    E --> F(Show the<br>button when<br>mouse enters<br>the pre element);
 *    F --> G(Hide the<br>button when<br>mouse leaves<br>the pre element);
 *    G --> H(Append the<br>button to<br>the pre element);
 */

 (function addCopyButton() {
    document.querySelectorAll('pre.prettyprint').forEach((el) => {
        // Create a new button element
        const button = document.createElement('button');
        button.textContent = 'Copy';
        button.style.display = 'none'; // Hide the button by default
        button.classList.add('copy-button');

        // Add an event listener to copy the code content when the button is clicked
        button.addEventListener('click', () => {
            const code = el.querySelector('code').textContent;
            const textarea = document.createElement('textarea');
            textarea.textContent = code;
            document.body.append(textarea);
            textarea.select();
            document.execCommand('copy');
            textarea.remove();
            alert('Code copied to clipboard!');
        });

        // Show the button when mouse enters the pre element
        el.addEventListener('mouseenter', () => {
            button.style.display = 'block';
        });

        // Hide the button when mouse leaves the pre element
        el.addEventListener('mouseleave', () => {
            button.style.display = 'none';
        });

        // Append the button to the pre element
        el.append(button);
    });
})()