From f9c91a77c24220cffc96ee8388559044599c607b Mon Sep 17 00:00:00 2001 From: pancakes Date: Fri, 12 Sep 2025 19:28:20 +1000 Subject: [PATCH] Style code blocks and setup copy code button --- PancakesWeb/Components/App.razor | 2 + PancakesWeb/wwwroot/js/codeblocks.js | 17 +++++++++ PancakesWeb/wwwroot/style.css | 57 ++++++++++++++++++++++++++++ 3 files changed, 76 insertions(+) create mode 100644 PancakesWeb/wwwroot/js/codeblocks.js diff --git a/PancakesWeb/Components/App.razor b/PancakesWeb/Components/App.razor index 6da1dcf..42d2ccb 100644 --- a/PancakesWeb/Components/App.razor +++ b/PancakesWeb/Components/App.razor @@ -21,6 +21,8 @@ + + diff --git a/PancakesWeb/wwwroot/js/codeblocks.js b/PancakesWeb/wwwroot/js/codeblocks.js new file mode 100644 index 0000000..d6bec28 --- /dev/null +++ b/PancakesWeb/wwwroot/js/codeblocks.js @@ -0,0 +1,17 @@ +function addCopyButtons() { + for (const code of document.getElementsByTagName("code")) { + if (code.parentElement.tagName !== "PRE") continue; + + const button = document.createElement("button"); + button.className = "copy-code-button"; + button.innerText = "Copy"; + + button.addEventListener("click", ev => { + navigator.clipboard.writeText(code.innerText); + }); + + code.parentElement.appendChild(button); + } +} + +document.addEventListener("DOMContentLoaded", addCopyButtons); \ No newline at end of file diff --git a/PancakesWeb/wwwroot/style.css b/PancakesWeb/wwwroot/style.css index 242131b..c2793d5 100644 --- a/PancakesWeb/wwwroot/style.css +++ b/PancakesWeb/wwwroot/style.css @@ -71,6 +71,59 @@ abbr { cursor: help; } +code { + font-family: var(--font-mono), monospace; + background-color: var(--foreground); + border: 1px solid var(--border-color); + border-radius: var(--radius); +} + +pre { + position: relative; +} + +pre code { + display: block; + padding: 1rem; + overflow-x: auto; + + text-wrap: nowrap; +} + +button { + display: inline-block; + padding: 0.5em 1em; + + font-size: small; + font-weight: bold; + line-height: 1; + background-color: var(--accent); + color: var(--background); + border: none; + border-radius: var(--radius); + cursor: pointer; +} + +button:hover, button:focus { + background-color: color-mix(in srgb, var(--accent) 80%, var(--background)); +} + +.copy-code-button { + position: absolute; + top: 0; + right: 0; + opacity: 0; + + font-size: x-small; + border-top-left-radius: 0; + border-bottom-right-radius: 0; + transition: 0.2s opacity; +} + +pre code:hover + .copy-code-button, .copy-code-button:hover { + opacity: 1; +} + .container { margin-left: auto; margin-right: auto; @@ -112,4 +165,8 @@ abbr { border-radius: var(--radius); animation: 0.3s ease-out title-fade-in; } + + .copy-code-button { + opacity: 1; + } } \ No newline at end of file