pancakes/PancakesWeb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Style code blocks and setup copy code button

Browse source
This commit is contained in:
pancakes 2025-09-12 19:28:20 +10:00
parent fc670aff4d
commit f9c91a77c2
Signed by: pancakes
SSH key fingerprint: SHA256:yrp4c4hhaPoPG07fb4QyQIgAdlbUdsJvUAydJEWnfTw
3 changed files with 76 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
PancakesWeb/Components/App.razor
View file

@ -21,6 +21,8 @@
<body> <body>
<Routes/> <Routes/>
<script src="@Assets["js/codeblocks.js"]"></script>
<script src="_framework/blazor.web.js"></script> <script src="_framework/blazor.web.js"></script>
</body> </body>

17
PancakesWeb/wwwroot/js/codeblocks.js Normal file
View file

@ -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);

57
PancakesWeb/wwwroot/style.css
View file

@ -71,6 +71,59 @@ abbr {
cursor: help; 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 { .container {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -112,4 +165,8 @@ abbr {
border-radius: var(--radius); border-radius: var(--radius);
animation: 0.3s ease-out title-fade-in; animation: 0.3s ease-out title-fade-in;
} }
.copy-code-button {
opacity: 1;
}
} }