add copy button, adjust codeblock style, close #2

layouts/partials/head.html

@@ -76,4 +76,5 @@
 <link rel="stylesheet" href="{{ "lib/icofont/icofont.min.css" | relURL }}" />
 <link rel="stylesheet" href="{{ "css/syntax.css" | relURL }}" />
 <link rel="stylesheet" href="{{ "css/style.css" | relURL }}" />
+<script src="/js/copy-code-block.js"></script>
 <link rel="shortcut icon" href="{{ "images/favicon.ico" | relURL }}" type="image/x-icon" />

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 **/
 /**********/

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);
+      }
+    );
+  }
+);
+