Add copy-to-clipboard button to code blocks
Injects a hover-revealed copy button into every <pre><code> block
site-wide via a single layout partial, reading textContent so escaped
samples copy as literal text. Ships copy/check icons and matching Sass.
Passes icon markup to JS via <template> elements instead of Twig's
|escape('js'), which calls mb_ord() and fatals without mbstring — same
class of bug as the existing |slice/mb_substr gotcha, now documented in
AGENTS.md.
Closes the "Copy-to-clipboard button on code blocks" backlog item in
novaconium/ISSUES.md.
This commit is contained in:
@@ -133,6 +133,7 @@ code {
|
||||
}
|
||||
|
||||
pre {
|
||||
position: relative;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
@@ -144,6 +145,36 @@ pre code {
|
||||
padding: 0;
|
||||
color: var(--text-color);
|
||||
}
|
||||
pre:hover .copy-code-button, pre .copy-code-button:focus-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.copy-code-button {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
color: var(--muted-color);
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
.copy-code-button:hover {
|
||||
background: var(--bg);
|
||||
color: var(--text-color);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.copy-code-button.copied {
|
||||
color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
|
||||
Reference in New Issue
Block a user