diff --git a/assets/css/main.css b/assets/css/main.css index 63fa220..033e3cc 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -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; -} \ No newline at end of file +} diff --git a/static/js/copy-code.js b/static/js/copy-code.js index ee7cdc7..2de3cda 100644 --- a/static/js/copy-code.js +++ b/static/js/copy-code.js @@ -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
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); + }); + }); + }); +});