Revert "fix: copy button position"

This commit is contained in:
Francesco Tomaselli 2025-04-01 12:06:34 +02:00 committed by GitHub
parent f56961a5c4
commit 9128fe46e3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 24 additions and 34 deletions

View file

@ -66,7 +66,7 @@ li {
list-style-type: none;
}
&>input[type="checkbox"] {
& > input[type="checkbox"] {
width: var(--li-checkbox-size);
height: var(--li-checkbox-size);
margin: 0 0.2em 0.15em -1.25em;
@ -86,24 +86,17 @@ input {
/* Code blocks */
.highlight {
position: relative;
}
.copy-code-container {
position: absolute;
top: 10px;
right: 10px;
z-index: 10;
}
.copy-code-button {
background-color: var(--background);
font-family: var(--font-mono);
padding: 3px 6px;
font-size: .8em;
font-size: 0.8em;
border-radius: var(--copy-code-button-border-radius);
position: absolute;
top: 10px;
right: 10px;
z-index: 1;
display: none;
border: 1px solid var(--code-border);
}
@ -606,4 +599,4 @@ blockquote {
blockquote p {
margin-left: 1rem;
margin-right: 1rem;
}
}

View file

@ -1,37 +1,34 @@
document.addEventListener("DOMContentLoaded", function () {
const codeBlocks = document.querySelectorAll(".highlight")
const codeBlocks = document.querySelectorAll("pre");
codeBlocks.forEach((codeBlock) => {
if (codeBlock.className == "mermaid") return
const copyButton = document.createElement("button")
copyButton.className = "copy-code-button"
copyButton.textContent = "copy"
const copyButtonContainer = document.createElement("div")
copyButtonContainer.className = "copy-code-container"
copyButtonContainer.appendChild(copyButton)
if (codeBlock.className == "mermaid") return;
const copyButton = document.createElement("button");
copyButton.className = "copy-code-button";
copyButton.textContent = "copy";
// Insert the button inside the <pre> block
codeBlock.appendChild(copyButton)
codeBlock.appendChild(copyButton);
copyButton.addEventListener("click", function () {
const code = codeBlock.querySelector("code")
const code = codeBlock.querySelector("code");
// Get the code content
const textToCopy = code.textContent || code.innerText
const textToCopy = code.textContent || code.innerText;
// Use the Clipboard API to copy the text
navigator.clipboard
.writeText(textToCopy)
.then(() => {
// Change button text to "Copied"
copyButton.textContent = "copied"
copyButton.textContent = "copied";
setTimeout(() => {
copyButton.textContent = "copy"
}, 2000) // Reset the button text after 2 seconds
copyButton.textContent = "copy";
}, 2000); // Reset the button text after 2 seconds
})
.catch((err) => {
console.error("Unable to copy text:", err)
})
})
})
})
console.error("Unable to copy text:", err);
});
});
});
});