Add copy buttons to code snippets

assets/scripts/main.js

@@ -8,7 +8,7 @@ for (var i = 0; i < btns.length; i++) {
 }
 
 function showTooltip(elem, msg) {
-    elem.setAttribute('class', 'btn tooltipped tooltipped-s');
+    elem.setAttribute('class', elem.className.indexOf('clip') === -1 ? 'btn tooltipped tooltipped-s': 'btn clip tooltipped tooltipped-s');
     elem.setAttribute('aria-label', msg);
 }
 

assets/scripts/snippets.js

@@ -0,0 +1,17 @@
+(function() {
+  'use strict';
+
+  var identifier = 0;
+  var snippets = Array.prototype.slice.call(document.querySelectorAll('pre.snippet'));
+
+  snippets.forEach(function(snippet) {
+    snippet.id = 'snip' + identifier;
+
+    var copyBtn = document.createElement('span');
+
+    copyBtn.className = 'btn clip';
+    copyBtn.setAttribute('data-clipboard-target', '#snip' + identifier++);
+
+    snippet.parentElement.insertBefore(copyBtn, snippet);
+  });
+})();

assets/styles/main.css

@@ -108,6 +108,16 @@ pre code {
     line-height: 20px;
 }
 
+span.btn.clip {
+    float: right;
+    height: 2em;
+    margin: 0.25vw 0 0 0.25vw;
+    background-image: url("../images/clippy.svg");
+    background-size: 60%;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
 code {
     background-color: #E8F5F2;
     border-radius: 3px;