Add Copy Button

[essesoul]

Prerequisites

Put an x into the box(es) that apply:

• [ ] This pull request fixes a bug.
• [x] This pull request adds a feature.
• [ ] This pull request introduces breaking change.

Description

Click on the button to copy the content of the code block

One-click copying of the content of a block of code is achieved by creating the files static/css/clipboard.css and static/js/clipboard.js

Users can now quickly copy the contents of a block by clicking the button in the upper right corner of the block.

Checklist

Put an x into the box(es) that apply:

General

• [x] Describe what changes are being made
• [x] Explain why and how the changes were necessary and implemented respectively
• [ ] Reference issue with #<ISSUE_NO> if applicable

Resources

• [ ] If you have changed any SCSS code, run make release to regenerate all CSS files

Contributors

• [x] Add yourself to CONTRIBUTORS.md if you aren't on it already

[luizdepra]

Nice, thank you. But I will need to make some modifications like move the CSS code to SCSS, and overriding the code template to add the button instead of using JS to include it.

[jemus42]

I was just about to research how to add a code copy button when I found this --- is this still being considered?

[pduchnovsky]

clipboard.writeText(codeBlock.innerText) must be clipboard.writeText(codeBlock.textContent) instead

innerText can add extra line breaks or modify spacing due to CSS/rendering. textContent preserves the exact formatting in the DOM — better for code blocks.

Anyway I already added this to my web repo directly and I like it, awesome.