CopyButton.js - A code block copy button util

CopyButton.js is a util for making copy buttons in your <pre><code> code blocks. It has a lot of configuration, and best of all, you don’t need to write a single line of js to use it.

Check out the examples/docs and the github repo.

The required dependencies are these:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>  
<script defer src="https://cdn.jsdelivr.net/gh/thatrandomperson5/copybutton.js@master/lib/copybutton.js"></script>

Although water.css is not required, the util was built with it in mind, so you might want to use that too.
After that, any <pre><code class="docopy"> will have a copy button.

Hope the community likes the util!

3 Likes

I could have used this for my PikaBot chat extension… but yesterday I decided to replace the code blocks with codemirror like Replit does ;-;

And I still can’t get the highlighting right

2 Likes

Unless you want users to edit the code, I really don’t recommend that XD (It is like killing an ant with a nuke)

Did you ask for help? There are lots of experienced members here.

It was mainly so I could use the same highlighting, and use the user’s theme, but it seems like Replit doesn’t use the normal js mode (and probably other ones too). So yeah I might change it back

I’ll probably make a bounty for it

1 Like

It does not seem like a bounty-level thing, you could probably get an answer by just making a topic.

1 Like

Update: the domain is now acquired thanks to @MiloCat! Try: http://copybuttonjs.milocat.rocks/

1 Like

Update: now has a global api (whole page) with the data-no-update attribute and the updateCopybutton() function. The data-copybutton-automatic-seen will be now be added to all code blocks that got applied a copybutton too.

More detail on the docs.