Add language and clipboard buttons to code blocks

This commit is contained in:
Jake Howard 2022-08-30 22:48:45 +01:00
parent da89510eee
commit f3b603a82a
Signed by: jake
GPG key ID: 57AFB45680EDD477
5 changed files with 50 additions and 6 deletions

View file

@ -59,6 +59,24 @@ window.addEventListener("load", () => {
endAudio: elevatorButton.dataset.endAudio, endAudio: elevatorButton.dataset.endAudio,
preloadAudio: false, preloadAudio: false,
}); });
document.querySelectorAll(".block-code").forEach((codeBlock) => {
const clipboardIcon = codeBlock.querySelector(".code-copy");
clipboardIcon.addEventListener("click", (event) => {
event.preventDefault();
navigator.clipboard
.writeText(codeBlock.querySelector("pre").textContent)
.then(() => {
clipboardIcon.classList.remove("fa-regular", "fa-clipboard");
clipboardIcon.classList.add("fa-solid", "fa-check");
setTimeout(() => {
clipboardIcon.classList.add("fa-regular", "fa-clipboard");
clipboardIcon.classList.remove("fa-solid", "fa-check");
}, 3000);
});
});
});
}); });
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {

View file

@ -54,13 +54,33 @@ div.block-mermaid {
} }
} }
div.block-code .highlight { div.block-code {
.filename {
font-family: $family-code;
background-color: $grey-lighter;
font-size: 1rem;
position: relative;
text-align: right;
transform: translateY(100%) translateX(-100%);
display: inline-block;
left: 100%;
padding: 0.25rem 1rem;
border-radius: 0 0 0 $radius-large;
box-shadow: $shadow;
@include dark-mode {
background-color: $grey-darker;
}
}
.highlight {
pre, pre,
span, span,
& { & {
@include dark-mode; @include dark-mode;
} }
} }
}
div.block-table { div.block-table {
td, td,

View file

@ -20,3 +20,4 @@ $code-background: none;
$pre-background: none; $pre-background: none;
$code-padding: 0; $code-padding: 0;
$code: inherit; $code: inherit;
$content-pre-padding: 2.75rem 1.25rem 1.25rem 1.25rem;

View file

@ -2,7 +2,8 @@
// Ensure animations aren't for the initial transition // Ensure animations aren't for the initial transition
html.dark-mode-animate & { html.dark-mode-animate & {
transition-duration: 0.5s; transition-duration: 0.5s;
transition-property: color, background-color, border-color, filter; transition-property: color, background-color, border-color, filter,
box-shadow;
} }
html.dark-mode & { html.dark-mode & {

View file

@ -1 +1,5 @@
<span class="filename">
{{ value.language }}
<i class="fa-regular fa-clipboard is-clickable code-copy" title="Copy to clipboard"></i>
</span>
{{ value.code }} {{ value.code }}