maik
/
Personal-Website
mirror of https://github.com/maikka39/Personal-Website.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add copy code block functionality

Browse Source
master
Maik de Kruif 2 weeks ago
parent 2c9eef4749
commit 201ba2ef75
No known key found for this signature in database
GPG Key ID: DB1A8C782DD43CB3
2 changed files with 71 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 22
      themes/maik-blog/assets/js/main.js
  2. 51
      themes/maik-blog/assets/scss/_main.scss

22
themes/maik-blog/assets/js/main.js
Unescape View File

@ -50,4 +50,26 @@ window.addEventListener("load", () => {
});
}
}
// Code copy button
for (let codeblock of document.querySelectorAll(".highlight pre")) {
if (codeblock.querySelector(".lnt")) continue; // skip line numbers
let button = document.createElement("button");
button.classList.add("codeblock-copy");
codeblock.appendChild(button);
button.addEventListener("click", (e) => {
e.preventDefault();
navigator.clipboard.writeText(codeblock.innerText);
document
.querySelectorAll(".current-code")
.forEach((elem) => elem.classList.remove("current-code"));
button.classList.add("current-code");
});
console.log(codeblock);
}
});

51
themes/maik-blog/assets/scss/_main.scss
Unescape View File

@ -528,10 +528,13 @@ table {
position: relative;
text-decoration: none;
--background-image: url("data:image/svg+xml, %3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20class=%22feather%20feather-link%22%3E%3Cpath%20d=%22M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71%22%3E%3C/path%3E%3Cpath%20d=%22M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71%22%3E%3C/path%3E%3C/svg%3E");
--link-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>');
--check-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="green" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>');
--background-image: var(--link-image);
&.current-heading {
--background-image: url("data:image/svg+xml, %3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22green%22%20stroke-width=%224%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20class=%22feather%20feather-check%22%3E%3Cpolyline%20points=%2220%206%209%2017%204%2012%22%3E%3C/polyline%3E%3C/svg%3E");
--background-image: var(--check-image);
}
&:hover {
@ -571,6 +574,8 @@ table {
}
.highlight {
position: relative;
&:has(table) {
margin: 0.95em 0;
border-radius: 8px;
@ -644,4 +649,46 @@ table {
}
}
}
.codeblock-copy {
@mixin code-copy-background($color) {
$color: "rgb(" + red($color) + "," + green($color) + "," +
blue($color) + ")";
background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#{$color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>');
}
position: absolute;
top: 10px;
right: 10px;
display: block;
width: 26px;
height: 26px;
border: none;
padding: 0;
margin: 0;
border-radius: 6px;
background: none;
background-color: inherit;
@include code-copy-background(#adadad);
background-repeat: no-repeat;
background-position: center;
background-size: auto 65%;
&.current-code {
--selected-code-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgb(52, 184, 0)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>');
background-image: var(--selected-code-image);
&:hover {
background-image: var(--selected-code-image);
}
}
&:hover {
@include code-copy-background(#ffffff);
}
}
}

Write Preview
Loading…
Cancel
Save