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 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!
I could have used this for my PikaBot chat extension… but yesterday I decided to replace the code blocks with codemirror like Replit does ;-;
still can’t get the highlighting right
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
Did you ask for help?
I’ll probably make a bounty for it
It does not seem like a bounty-level thing, you could probably get an answer by just making a topic.
Update: the domain is now acquired thanks to @MiloCat! Try: http://copybuttonjs.milocat.rocks/
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.