add copy code button and config param #122

README.md

@@ -83,6 +83,7 @@ params:
   style: light-without-switcher
   readMore: false
   disableSummary: false
+  copyCodeButton: true # true by default
   # utteranc.es support
   utterancesRepo: ""  # mandatory
   utterancesTheme: "" # optional
@@ -131,9 +132,9 @@ Now enter [`localhost:1313`](http://localhost:1313/) in the address bar of your
 ### Dark Mode
 Customize via `style` param in `params` section of config.
 Options:
-- `light-without-switcher` - light theme, without switcher, JS-free (by default)
-- `dark-without-switcher` - dark theme, without switcher, JS-free
-- `auto-without-switcher` - theme based on user system settings, without switcher, JS-free
+- `light-without-switcher` - light theme, without switcher (by default)
+- `dark-without-switcher` - dark theme, without switcher
+- `auto-without-switcher` - theme based on user system settings, without switcher
 - `light` - light theme by default, can be switched by user to dark theme and back. Theme settings are saved for user 
 - `dark` - dark theme by default, can be switched by user to light theme and back. Theme settings are saved for user 
 - `auto` - theme based on user system settings by default, can be switched by user to dark/light theme. Theme settings are saved for user (by default in example sites)

assets/css/main.css

@@ -640,6 +640,47 @@ ul.language-select > li, ul.footer-menu > li {
     display: none;
 }
 
+/* Copy code  */
+.highlight {
+    position: relative;
+}
+.highlight pre {
+    padding-right: 75px;
+}
+
+.highlight:hover .highlight-copy-btn {
+    display: inline-block;
+    border: 1px solid var(--bg-color);
+}
+
+.highlight-copy-btn {
+    display: none;
+    position: absolute;
+    top: 7px;
+    right: 7px;
+    border: 0;
+    border-radius: 4px;
+    padding: 1px;
+    font-size: 0.7em;
+    line-height: 1.8;
+    color: #fff;
+    background-color: #777;
+    min-width: 25px;
+    text-align: center;
+    border-radius: 5px;
+}
+.highlight-copy-btn:hover {
+    transition-duration: .1s;
+    background-color: #666;
+    border: 1px solid var(--bq-color) !important;
+}
+
+.highlight-copy-btn,
+.highlight-copy-btn svg {
+    vertical-align: middle;
+    margin: 8px;
+}
+
 /* Media Queries */
 
 @media (max-width: 840px) {

assets/js/copy-code.js

@@ -0,0 +1,64 @@
+/*
+This file has been taken from following blogpost with some modifications:
+https://koki-nakamura22.github.io/blog/2019/10/03/hugo-adding-copy-button/
+Many thanks to Koki Nakamura!
+*/
+
+document.addEventListener("DOMContentLoaded", function(event) {
+  'use strict';
+
+  if(!document.queryCommandSupported('copy')) {
+    return;
+  }
+
+  let svgCopyCode = '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25"><path d="M18 6v-6h-18v18h6v6h18v-18h-6zm-12 10h-4v-14h14v4h-10v10zm16 6h-14v-14h14v14z"/></svg>';
+  let svgSuccessCode = '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>';
+  let svgFailCode = '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25"><path d="M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.095 9.184 2.81 2.81 9.112-9.192 9.18 9.1z"/></svg>';
+
+  function changeIcon(el, innerHtml) {
+    el.innerHTML = innerHtml;
+    setTimeout(() => {
+      el.innerHTML = svgCopyCode;
+    }, 1000);
+  }
+
+  function selectText(node) {
+    let selection = window.getSelection();
+    let range = document.createRange();
+    if (node.childElementCount === 2) {
+      // Skip the title.
+      range.selectNodeContents(node.children[1]);
+    } else {
+      range.selectNodeContents(node);
+    }
+    selection.removeAllRanges();
+    selection.addRange(range);
+    return selection;
+  }
+
+  function addCopyButton(containerEl) {
+    let copyBtn = document.createElement("button");
+    copyBtn.className = "highlight-copy-btn";
+    copyBtn.innerHTML = svgCopyCode;
+
+    let codeEl = containerEl.firstElementChild;
+    copyBtn.addEventListener('click', () => {
+      try {
+        let selection = selectText(codeEl);
+        document.execCommand('copy');
+        selection.removeAllRanges();
+
+        changeIcon(copyBtn, svgSuccessCode)
+      } catch(e) {
+        console && console.log(e);
+        changeIcon(copyBtn, svgFailCode)
+      }
+    });
+
+    containerEl.appendChild(copyBtn);
+  }
+
+  // Add copy button to code blocks
+  let highlightBlocks = document.getElementsByClassName('highlight');
+  Array.prototype.forEach.call(highlightBlocks, addCopyButton);
+}, false);

exampleSite/config.toml

@@ -17,6 +17,7 @@ dateFormat = "2006-01-02"
 paginationSinglePost = true
 style = "auto"
 readMore = false
+copyCodeButton = true
 
 # utteranc.es support
 utterancesRepo = ""  # mandatory

exampleSiteMultilingual/config.toml

@@ -18,6 +18,7 @@ dateFormat = "2006-01-02"
 paginationSinglePost = true
 style = "auto"
 readMore = false
+copyCodeButton = true
 
 # utteranc.es support
 utterancesRepo = ""  # mandatory

layouts/partials/head.html

@@ -18,6 +18,10 @@
 {{ partial "favicons.html" . }}
 {{ partial "resource.html" (dict "context" . "type" "css" "filename" "css/main.css") }}
 
+{{ if .Site.Params.copyCodeButton | default true }}
+    {{ partial "resource.html" (dict "context" . "type" "js" "filename" "js/copy-code.js") }}
+{{ end }}
+
 {{ range .Site.Params.customJS -}}
   {{ partial "resource.html" (dict "context" $ "type" "js" "filename" . ) }}
 {{- end }}