Docs to explain copy all code blocks on a page at once.

[ridingmower]

📚 Documentation

Can you please help clarify in your documentation.

Often webpages that explain something in code, have several snippets.

Some of these snippets scroll past the page, could you show us how to select and copy all the codeblocks or sections in markdown code or a specific css.

thanks

[y377]

@ridingmower Currently it can be used for code blocks dynamically created by markdown, I hope it will be helpful to you, but there are also some fly in the ointment! As shown in the video below!

window.addEventListener("load", event_pageLoaded, false);

function event_pageLoaded() {
    // let codeChunk = document.querySelectorAll("code:nth-child(2)");
    let codeChunk = document.querySelectorAll("pre > code:nth-child(2)");
    // var codeChunk = document.querySelectorAll("pre > code.hljs");

    for (let i = 0; i < codeChunk.length; i++) {
        let pre = codeChunk.item(i);
        let btns = document.createElement("button");

        // btns.insertAdjacentElement('afterend', btns);
        btns.insertAdjacentHTML('afterbegin', '<i class="bi bi-clipboard text-white fs-3" data-bs-toggle="tooltip" title="复制"></i>');

        btns.classList.add("btn", "btn-none");
        // btn.classList.add("btn", "btn-none");

        pre.appendChild(btns, pre.nextSibling);
        btns.setAttribute("data-clipboard-action", "copy");
        // btns.innerHTML = '<i class="bi bi-clipboard text-white fs-3" data-bs-toggle="tooltip" data-bs-placement="top" title="复制"></i>';
        // btns.setAttribute("data-bs-toggle", "tooltip");
        // btns.setAttribute("data-bs-placement", "top");
        // btns.setAttribute("title", "复制");

        // Copy to clipboard
        var clipboard = new ClipboardJS('[data-clipboard-action="copy"]', {

            target: function(trigger) {
                return trigger.parentElement;
                // return trigger.nextElementSibling;
            },

        });
        // const ggdd = document.getElementsByClassName("bi bi-clipboard text-white fs-3");
        //https://github.com/yajra/laravel-datatables/issues/741#issuecomment-245780785
        clipboard.on('success', function(e) {
            console.info('Action:', e.action);
            // console.info('Text:', e.text);
            // console.info('Trigger:', e.trigger);

            // var sss = document.getElementsByClassName(".bi-clipboard");
            // for (var ii = 0; ii < myNodeList.length; ii++) {
            //     var item = myNodeList[ii]; // 调用 myNodeList.item(i) 是没有必要的
            e.clearSelection();
            // }
            //  sss.setAttribute("class","bi bi-clipboard-check text-success fs-3")
            // myNodeList.innerHTML = '<i class="bi bi-clipboard-check text-success fs-3"></i>';

            // for (var checkbox of baseElement) {
            //     checkbox.checked = true;
            //     checkbox.innerHTML = '<i class="bi bi-clipboard-check text-success fs-3"></i>';
            // }
            //var ssds = baseElement.length;
            //   checkbox.innerHTML= '<i class="bi bi-clipboard-check text-success fs-3"></i>';
            // btns.remove();
            // btns.classList.remove("btn","bi","bi-clipboard","text-white","fs-2");
            // sds.innerHTML = '<button class="" data-clipboard-copy><i class="bi bi-clipboard-check text-success fs-3"></i></button>';
            // checkbox.insertAdjacentHTML('beforebegin', '<i class="bi bi-clipboard-check text-success fs-3"></i>');
            // btns.innerHTML = '<i class="bi bi-clipboard-check text-success fs-3"></i>';
            // btns.setAttribute('class', 'bi bi-clipboard-check text-success fs-3');
            // clipboard.destroy();
            // var baseElement = document.querySelector("bi bi-clipboard text-white fs-3");
            // clipboard.destroy();

            // e.clearSelection();
        });

    }

};

video

https://user-images.githubusercontent.com/58632405/210174270-da3f9a4a-2f8f-44a9-84a0-67419e46b0a7.mp4

The expected effect, click copy, the icon changes from white to green, not all of them turn green, I look forward to the help of God to solve it, I have been doing it for a long time, but I can’t succeed, I also searched Google, but I didn’t find the ideal s answer!

I am usingBootstrap Icons

[ridingmower]

would be nice as a feature option in the main plugin if possible, I am closing for now, thanks