Add clipboard button to code block

Author: cotes2020

_includes/refactor-content.html

@@ -102,7 +102,7 @@
 
 {% endif %}
 
-<!-- Add lang-badge for code snippets -->
+<!-- Add header for code snippets -->
 
 {% if _content contains '<div class="language-' %}
   {% assign _code_splits = _content | split: '<div class="language-' %}
@@ -116,7 +116,7 @@
       {% capture _tag_head %}<div class="language-{% endcapture %}
       {% assign _replacement = '-rouge"><div class="code-header" data-lang="'
           | append: _lang
-          | append: '"></div><div class="highlight">'
+          | append: '"><button><i class="fa-fw far fa-clipboard"></i></button></div><div class="highlight">'
       %}
       {% capture _tag_tail %}{{ _snippet | replace: '-rouge"><div class="highlight">', _replacement }}{% endcapture %}
       {% assign _new_content = _new_content | append: _tag_head | append: _tag_tail %}

_sass/addon/syntax.scss

@@ -166,6 +166,10 @@ div {
   background: var(--code-header-bg);
   border-top-left-radius: $code-radius;
   border-top-right-radius: $code-radius;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  line-height: 1.85rem;
 
   // language badge
   &::before {
@@ -176,6 +180,29 @@ div {
     text-transform: uppercase;
     padding-left: 1em;
   }
+
+  // clipboard
+  button {
+    border: 0;
+    background-color: inherit;
+    border-top-right-radius: $code-radius;
+    color: var(--highlight-lineno-color);
+
+    &:hover {
+      background-color: gray;
+      color: white;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    i {
+      font-size: 85%;
+    }
+
+  }
+
 }
 
 @media all and (max-width: 576px) {
@@ -187,7 +214,11 @@ div {
 
       .code-header {
         border-radius: 0;
-        padding: 0 0.4rem;
+        padding-left: 0.4rem;
+
+        button {
+          border-top-right-radius: 0;
+        }
       }
     }
   }