adding copy buttons to code blocks

docs/_static/custom.css

@@ -0,0 +1,22 @@
+button.copybtn {
+  webkit-transition: opacity .3s ease-in-out;
+  -o-transition: opacity .3s ease-in-out;
+  transition: opacity .3s ease-in-out;
+  opacity: 0;
+  padding: 2px 6px;
+  position: absolute;
+  right: 4px;
+  top: 4px;
+}
+
+div.highlight:hover .copybtn, div.highlight .copybtn:focus {
+    opacity: .3;
+}
+
+div.highlight .copybtn:hover {
+    opacity: 1;
+}
+
+div.highlight {
+    position: relative;
+}

docs/_static/custom.js

@@ -0,0 +1,25 @@
+// Set up copy/paste for code blocks
+function addCopyButtonToCode(){
+  // get all <code> elements
+  var allCodeBlocksElements = $( "div.highlight pre" );
+
+  allCodeBlocksElements.each(function(ii) {
+   	// add different id for each code block
+
+  	// target
+    var currentId = "codeblock" + (ii + 1);
+    $(this).attr('id', currentId);
+
+    //trigger
+    var clipButton = '<button class="btn copybtn" data-clipboard-target="#' + currentId + '"><img src="https://clipboardjs.com/assets/images/clippy.svg" width="13" alt="Copy to clipboard"></button>';
+       $(this).after(clipButton);
+    });
+
+    new Clipboard('.btn');
+}
+
+$(document).ready(function () {
+  // Highlight current page in sidebar
+  console.log('hi');
+  addCopyButtonToCode();
+});