feat: add copy-code-btn #360

assets/js/initCopyCode.js

@@ -0,0 +1,26 @@
+const initCopyCode = () => {
+  const containers = document.querySelectorAll('.highlight-container');
+
+  containers.forEach(container => {
+    const copyBtn = container.querySelector('.copy-code-btn');
+    const codeElement = container.querySelector('.highlight code[data-lang]');
+
+    copyBtn.addEventListener('click', function () {
+      navigator.clipboard.writeText(codeElement.textContent).then(function () {
+        /* Chrome doesn't seem to blur automatically,
+           leaving the button in a focused state. */
+        copyBtn.blur();
+
+        copyBtn.innerText = 'Copied!';
+
+        setTimeout(function () {
+          copyBtn.innerText = 'Copy';
+        }, 2000);
+      }, function (error) {
+        copyBtn.innerText = 'Error';
+      });
+    });
+  })
+}
+
+export default initCopyCode;

assets/js/main.js

@@ -2,6 +2,7 @@ import initMobileNavbar from './initMobileNavbar.js';
 import initToc from './initToc.js';
 import initHeaderAnchor from './initHeaderAnchor.js';
 import initToggleTheme from './initToggleTheme.js';
+import initCopyCode from './initCopyCode.js';
 
 // Use an async function to handle asynchronous initialization
 async function initApp() {
@@ -13,7 +14,8 @@ async function initApp() {
     await Promise.all([
       initMobileNavbar(),
       initToc(),
-      initHeaderAnchor()
+      initHeaderAnchor(),
+      initCopyCode()
     ]);
 
     console.log('All modules initialized successfully');

assets/sass/_shortcodes/_highlight.scss

@@ -0,0 +1,50 @@
+.highlight-container {
+  margin: 1em 0;
+}
+
+.highlight {
+  position: relative;
+  overflow-x: auto;
+  border: 2px solid #dddddd;
+  line-height: 1.6;
+
+  & > div {
+    padding: 1em 0.3em;
+  }
+
+  code {
+    all: unset;
+    border-radius: 0;
+    padding: 0 !important;
+  }
+
+  pre {
+    margin: 0; /* remove normal pre margin */
+    border-radius: 0;
+  }
+
+  table {
+    padding: 1em 0.3em !important;
+
+    // td:nth-child(2) code {
+    //   &::after {
+    //     position: absolute;
+    //     top: 0;
+    //     left: 0.5em;
+    //     font-weight: bold;
+    //     content: attr(data-lang);
+    //   }
+    // }
+  }
+}
+
+button.copy-code-btn {
+  /* right-align */
+  display: block;
+  margin-left: auto;
+  margin-right: 0;
+
+  margin-bottom: -2px;
+  font-size: 0.6em;
+  padding: 0.1em 0.3em;
+}

assets/sass/jane.scss

@@ -190,7 +190,6 @@ $mobile-breakpoint: 768px !default;
 // @import "_partial/404";
 // @import "_partial/author_info";
 // @import "_partial/search";
-@import "_partial/_post/_content/highlight"; // global highlight style
 
 /**------------------------------------------------------------------------
  *                           page styles
@@ -207,6 +206,7 @@ $mobile-breakpoint: 768px !default;
 /**------------------------------------------------------------------------
  *                           shortcodes
  *------------------------------------------------------------------------**/
+@import "_shortcodes/highlight";
 @import "_shortcodes/notice";
 
 /**------------------------------------------------------------------------

layouts/_default/_markup/render-codeblock.html

@@ -0,0 +1,7 @@
+<div class="highlight-container">
+
+  <button class="copy-code-btn outline">Copy</button>
+
+  {{ $result := transform.HighlightCodeBlock . }}
+  {{ $result.Wrapped }}
+</div>

layouts/shortcodes/highlight.html

@@ -0,0 +1,8 @@
+<div class="highlight-container">
+  <button class="copy-code-btn outline">Copy</button>
+  {{- if len .Params | eq 2 }}
+    {{ highlight (trim .InnerDeindent "\n\r") (.Get 0) (.Get 1) }}
+  {{- else }}
+    {{ highlight (trim .InnerDeindent "\n\r") (.Get 0) "" }}
+  {{- end }}
+  </div>