Shulou(Shulou.com)06/02 Report--

How to add a copy code button code to the pre tag of the website code block? for this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

Refer to other professional blog systems, all have a button on the code block. Code used to quickly copy an entire block of code. So I also want to add this function to my blog.

Note: the chrome test passed. Other browsers are not tested.

The idea of realization is:

1. After the page loads, use js to add a button to each pre tag.

2. Add a click event to the button. The function of the click event is the content of the block.

Implementation code:

In the css section, btn-pre-copy is a "" button added to the pre tag using js. The role of css is to make it appear in the upper right corner of the pre tab. Note the position attribute in the pre tag and button here

.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 (0meme 0% page54.9% transition: color .1s;}

The js part and the js part mainly add buttons to the pre tag and implement the copy part. The implementation of the copy part here is to instantiate a temporary node textarea, then set the pre content into the temporary node, then select the content to copy, and finally destroy the node. Specific reference code. Js is partially dependent on jquery

(function () {/ / add nodes let preList = $(".content pre") to each string of code elements; for (let pre of preList) {/ / add "button let btn = $(") to each code block; btn.prependTo (pre);}}) / * * perform the operation * @ param obj * / function preCopy (obj) {/ / execute the copy let btn = $(obj); let pre = btn.parent (); / / in order to achieve the replication function. Add a temporary textarea node. Use him to copy content let temp = $(""); / / avoid copying button text when copying content. Temporarily leave btn.text (""); temp.text (pre.text ()); temp.appendTo (pre); temp.select (); document.execCommand ("Copy"); temp.remove (); / / change the button name btn.text ("copied successfully"); / / change the button name back to setTimeout (() = > {btn.text (");}, 1500);}

Here we do a simple demo on gitee. Demo example:

This is the answer to the question about how to add a copy code button code to the pre tag of the website code block. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.