Add a copy code button code to the website code block pre tag

Referring to other more professional blog systems, there is a copy code button on the code block. Code to quickly copy an entire block of code. So I also want to add this function to my blog.

Note: Chrome test passed. Other browsers have not been tested.

Implementation ideas:

1. After the page is loaded, use js to add a button "Copy Code" to each pre tag

2. Add a click event to the button. The function of the click event is to copy the contents of the code block

Implementation code:

In the css part, btn-pre-copy is the "copy code" button added in the pre tag using js. The role of css is to make it appear in the upper right corner of the pre tag. Here we should pay attention to the position attribute in the pre tag and button

.content pre{
    position: relative;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
}
pre .btn-pre-copy{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    color: hsla(0,0%,54.9%,.8);
    transition: color .1s;
}

The js part mainly adds buttons to the pre tag and implements the copy part. My implementation of the copy part here is to first instantiate a temporary node textarea, then set the content of pre into this temporary node, then select the content to copy, and finally destroy the node. Specific reference code. The js part depends on jquery

$(function(){
    //Add a copy code node to each string of code elements let preList = $(".content pre");
    for (let pre of preList) {
        //Add a "Copy Code" button to each code block let btn = $("<span class=\"btn-pre-copy\" onclick='preCopy(this)'>Copy Code</span>");
        btn.prependTo(pre);
    }
});

/**
    * Execute the copy code operation * @param obj
    */
function preCopy(obj) {
    //Execute copy let btn = $(obj);
    let pre = btn.parent();
    //In order to achieve the copy function. Add a temporary textarea node. Use it to copy the content let temp = $("<textarea></textarea>");
    //Avoid copying the button text when copying the content. First temporarily empty btn.text("");
    temp.text(pre.text());
    temp.appendTo(pre);
    temp.select();
    document.execCommand("Copy");
    temp.remove();
    //Modify button name btn.text("Copy successful");
    //Change the button name back after a certain period of time setTimeout(()=> {
        btn.text("Copy code");
    },1500);
}

Here is a simple demo on gitee. Demo example:

Online test: http://demo.jb51.net/js/2021/code_copy/

This is the end of this article about adding a copy code button code to the pre tag of the website code block. For more relevant code highlights and adding copy code function content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!