diff --git a/docs/main.mjs b/docs/main.mjs
index be70fa928..1b9c8a8b8 100644
--- a/docs/main.mjs
+++ b/docs/main.mjs
@@ -25,3 +25,26 @@ document.querySelectorAll('.copy-icon').forEach(icon => {
}, 750)
})
})
+
+const preTags = document.querySelectorAll('pre');
+
+// Function to add copy buttons
+preTags.forEach(pre => {
+ const copyButton = document.createElement('button');
+ copyButton.className = 'copy-button';
+ copyButton.innerHTML = ``;
+
+ pre.appendChild(copyButton);
+ copyButton.addEventListener('click', () => {
+ const codeToCopy = pre.innerText;
+ navigator.clipboard.writeText(codeToCopy).then(() => {
+ // copyButton.innerText = 'Copied!';
+ copyButton.innerHTML = ``;
+ setTimeout(() => {
+ copyButton.innerHTML = ``;
+ }, 1500);
+ }).catch(err => {
+ console.error('Failed to copy:', err);
+ });
+ });
+});
\ No newline at end of file
diff --git a/docs/style.css b/docs/style.css
index 94123ceb9..6fd76ff43 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -67,12 +67,24 @@ code {
pre {
padding: 1rem;
-
+position: relative;
background-color: var(--c-dark);
border-radius: 0.25em;
color: #fff;
}
+.copy-button{
+ position: absolute;
+ top: 0;
+ right: 0;
+ padding: 0.5em 1em;
+ color: #fff;
+ border: none;
+ border-radius: 0 0 0 0.25em;
+ cursor: pointer;
+ background: none;
+}
+
pre code {
background-color: transparent;
font-size: 0.8rem !important;