diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index a45768d..34e5696 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -76,4 +76,5 @@
+
diff --git a/static/css/style.css b/static/css/style.css
index 12301bb..42f3a4f 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -447,17 +447,23 @@ body {
}
/* keep in style with highlighting */
-.content pre { padding: 7px; }
+.content pre {
+ background-color: var(--color-bg-block);
+ border-radius: 3px;
+
+ /* The copy button with absolute position need this.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/position
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+ */
+ position: relative;
+}
.content pre code {
display: block;
padding: var(--len-3);
-
border: none;
- background-color: var(--color-bg-block);
- border-radius: 3px;
-
+ background-color: unset;
overflow: auto;
width: 100%;
}
@@ -547,7 +553,6 @@ body {
{ visibility: visible }
.highlight pre {
- padding: 7px;
overflow-x: auto;
}
@@ -556,6 +561,24 @@ body {
overflow-x: auto;
}
+/* the copy button added by /js/copy-code-button.js */
+pre .copyCodeButton {
+ position: absolute;
+ top: var(--len-1);
+ right: var(--len-3);
+
+ font-family: var(--fonts-mono);
+ color: var(--color-fg-hyperlink);
+ cursor: pointer;
+ visibility: hidden;
+}
+pre:hover .copyCodeButton {
+ visibility: visible;
+}
+pre .copyCodeButton:hover {
+ color: var(--color-fg-hyperlink-hover);
+}
+
/**************************/
/* setup list page layout */
/**************************/
@@ -687,12 +710,6 @@ body {
width: 85%;
}
-/* keep content style from being affected by remark42 style */
-.content pre {
- background-color: transparent;
- color: var(--color-fg-font-normal)
-}
-
/**********/
/** misc **/
/**********/
diff --git a/static/js/copy-code-block.js b/static/js/copy-code-block.js
new file mode 100644
index 0000000..945cd28
--- /dev/null
+++ b/static/js/copy-code-block.js
@@ -0,0 +1,36 @@
+/*
+ * Every codeblock has "pre > code" structure, some highlighted codeblocks have
+ * "div.highlight > pre.chroma > code" structure. So, use the simple CSS selector
+ * to query all codeblocks.
+ */
+document.addEventListener("DOMContentLoaded",
+ () => {
+ var codeblocks = document.querySelectorAll(".single .content pre code");
+
+ console.log("codeblocks length:", codeblocks.length);
+
+ codeblocks.forEach(
+ (codeblock) => {
+ let elementPre = codeblock.parentElement;
+
+ let button = document.createElement("div");
+ button.classList.add("copyCodeButton");
+ button.innerHTML = "copy";
+ button.addEventListener("click",
+ () => {
+ navigator.clipboard.writeText(codeblock.textContent);
+
+ button.innerHTML = "copied!";
+ setTimeout(
+ () => { button.innerHTML = "copy"; },
+ 1000
+ );
+ }
+ );
+
+ elementPre.appendChild(button);
+ }
+ );
+ }
+);
+