Add a Copy Button to Any Element on a Web Page | /en/2023/09/copy-button/

Add a Copy Button to Any Element on a Web Page

The three most desirable features for code blocks on web pages, in my opinion, are syntax highlighting, code folding, and the copy button. Syntax highlighting is way beyond my capability to implement, …

https://yihui.org/en/2023/09/copy-button/

👍🎉

4 Replies

maelle 2y ago

Thanks so much @yihui, I was just fighting clipboard.js for some website, so this is perfect and timely for me! 😸

yihui 2y ago

You are welcome! I'm glad that it could be useful to you.

crazypeace 1y ago

博主您好！
请看一下这里是否漏了< /link >?

yihui 1y ago

谢谢，但并没有。原因参见：https://developer.mozilla.org/en-US/docs/Glossary/Void_element

crazypeace 1y ago

感谢回复!
看来应该是blogspot的编辑器的没有按规范严格实现吧.
我要加上 < /link > 或, 写成 < link .... / > 这样才可以.

njlarsson 10mo ago

Thank you so much! I got a variant to work on my Wordpress site without too much trouble. One slight problem, however: when the preformatted text is too wide for the page, so that you have to scroll to see the end of the lines, the copy buttpn scrolls along with the text instead of staying in the right corner. See the JSON block four paragraphs down on this page for instance:

https://klipspringer.avadeaux.net/screenshots-of-klipspringer-now-streaming/

Any idea for how to fix that?

njlarsson 10mo ago

Never mind, I figured it out! I just needed to place the button in the surrounding element instead of the pre itself. Perhaps that's why you had .parentNode in the code, I didn’t get that. Thanks again!

In case it’s of any interest, what I did to make it move in my context, which is a Wordpress site where the html is generated by Emacs ORG Mode using Org2Blog, was to use the WPCode plugin to place this in the footer:

<script>
 for (const src of document.getElementsByClassName("src")) {
     const copy = document.createElement('span');
     copy.classList.add("copy-button");
     copy.addEventListener("click", () => {
         navigator.clipboard.writeText(src.innerText);
         copy.classList.add("copied-button");
         setTimeout(() => { copy.classList.remove("copied-button") }, 200);
     });
     src.appendChild(copy);
 }
</script>

And add this to “additional CSS” under Customize:

.org-src-container {
    position: relative;
}
.copy-button {
    position: absolute;
    inset: .5em .5em auto auto;
    width: 1em;
    height: 1em;
    border: 1px solid;
    box-shadow: -.3em .3em #c0c0c0;
    border-radius: .25em;
    cursor: pointer;
    display: none;
    color: #000000;
}
.copied-button {
    box-shadow: none;
    background: #c0c0c0;
}             
:is(:focus, :hover) > .copy-button {
    display: inline-block;
}

I don’t get all the CSS magic I copied from you there, and “inset” is red in the CSS code display on the Wordpress web interface for some reason, but it works. :)

crazypeace 5mo ago

反馈一个复制结果带NBSP的问题.
我的使用场景是在blogspot中, 我用 blockquote 框代码块. (而不是用 pre code框代码块)
参考了您的方案, 略加改动得到的复制按钮方案, 复制结果中含有NBSP.
会影响shell脚本的执行和 yaml文件的解析.
修复方案就是加个 .replace(/\u00A0/g,' ')

具体描述见
https://zelikk.blogspot.com/2025/09/copy-code-button-nbsp.html