Add copy code button

assets/scripts/features/copyCode/copyCode.js

@@ -0,0 +1,34 @@
+if (navigator && navigator.clipboard) {
+  addCopyButtons(navigator.clipboard)
+} else {
+  const script = document.createElement('script')
+  script.src =
+    'https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/2.7.0/clipboard-polyfill.promise.js'
+  script.integrity = 'sha256-waClS2re9NUbXRsryKoof+F9qc1gjjIhc2eT7ZbIv94='
+  script.crossOrigin = 'anonymous'
+  script.onload = function () {
+    addCopyButtons(clipboard)
+  }
+
+  document.body.appendChild(script)
+}
+
+function addCopyButtons(clipboard) {
+  document.querySelectorAll('pre > code').forEach(function (codeBlock) {
+    const button = document.createElement('a')
+    button.className = 'copy-code-button'
+    button.innerHTML = "<i class='fa-regular fa-copy'></i>"
+
+    button.addEventListener('click', function () {
+      clipboard.writeText(codeBlock.innerText)
+    })
+
+    const pre = codeBlock.parentNode
+    if (pre.parentNode.classList.contains('highlight')) {
+      const highlight = pre.parentNode
+      highlight.parentNode.insertBefore(button, highlight)
+    } else {
+      pre.parentNode.insertBefore(button, pre)
+    }
+  })
+}

assets/scripts/features/copyCode/index.js

@@ -0,0 +1 @@
+import './copyCode'

assets/scripts/features/index.js

@@ -25,3 +25,7 @@ if (process.env.FEATURE_MATH === '1') {
 if (process.env.FEATURE_EMBEDPDF === '1') {
   import('./embedpdf')
 }
+
+if (process.env.FEATURE_COPYCODEBUTTON === '1') {
+  import('./copyCode')
+}

assets/styles/components/misc.scss

@@ -50,6 +50,18 @@ pre {
   }
 }
 
+.copy-code-button {
+  display: flex;
+  justify-content: right;
+  margin-right: 0.2em;
+  margin-bottom: -1.2em;
+  font-size: 20pt;
+}
+
+.highlight pre { 
+  margin: 0;
+}
+
 html[data-theme='dark'] {
   .paginator {
     .page-item {

exampleSite/hugo.yaml

@@ -91,6 +91,10 @@ params:
   # Configure various features of this theme
   features:
 
+    # Enables copy code button
+    copyCodeButton:
+      enable: true
+
     # Enable dark theme
     darkMode:
       enable: true