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