Add a Copy button to our <pre> blocks.

_layouts/base.html

@@ -49,6 +49,8 @@ layout: compress
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 
+    <script src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.4.2/clipboard.min.js"></script>
+
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
     <!--[if lt IE 9]>

_layouts/docs.html

@@ -23,3 +23,5 @@ layout: default
     </div>
   </div>
 </div>
+
+<script src="{{home}}/js/copyToClipboard.js"></script>

css/docs.scss

@@ -10,12 +10,36 @@ sitemap_exclude: y
         height: 1em;
         visibility: hidden;
     }
-
-    .center-image-75 {
-        height: 75%;
-        width: 75%;
-        display: block;
-        margin: 0 auto;
-        float: none;
-    }
+}
+
+.copy-button {
+    cursor: pointer;
+    border: none;
+    border-radius: 4px;
+    font-size: 10px;
+    font-weight: 500;
+    padding: 0px 6px 0px 6px;
+    color: #795548;
+    background-color: transparent;
+    position: absolute;
+    right: 62px;
+    margin-top: 3px;
+}
+
+.copy-button:hover {
+    outline: 0;
+    background-color: $popBrandColor;
+}
+
+.copy-button:before {
+    content: '';
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    margin-right: 3px;
+    background-size: contain;
+    background-image: url(../img/clipboard.svg);
+    background-repeat: no-repeat;
+    position: relative;
+    top: 3px
 }

img/clipboard.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" fill="#795548" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<g>
+	<path d="M161,160.5h192c-1.688-20-9.729-35.45-27.921-40.356c-0.446-0.119-1.12-0.424-1.567-0.541
+		c-12.004-3.424-21.012-7.653-21.012-20.781V78.227C302.5,52.691,281.976,32,256.49,32c-25.466,0-45.99,20.691-45.99,46.227v20.595
+		c0,13.128-8.592,17.169-20.597,20.593c-0.447,0.117-0.8,0.61-1.266,0.729C170.446,125.05,162.927,140.5,161,160.5z M256.99,64.395
+		c7.615,0,13.791,6.195,13.791,13.832c0,7.654-6.176,13.85-13.791,13.85c-7.614,0-13.772-6.195-13.772-13.85
+		C243.218,70.59,249.376,64.395,256.99,64.395z"/>
+	<path d="M405.611,63.5H331.5v13.988c0,10.583,9.193,19.012,19.507,19.012h37.212c6.667,0,12.099,5.435,12.44,12.195l0.085,327.1
+		c-0.322,6.432-5.303,11.546-11.514,12.017l-264.418,0.031c-6.211-0.471-11.149-5.695-11.472-12.126l-0.085-327.014
+		c0.322-6.761,5.858-12.203,12.506-12.203h37.231c10.313,0,18.507-8.429,18.507-19.012V63.5h-73.131
+		C93.25,63.5,80.5,76.058,80.5,91.575v360.38c0,15.502,12.75,28.545,27.869,28.545H256.99h148.621
+		c15.138,0,26.889-13.043,26.889-28.545V91.575C432.5,76.058,420.749,63.5,405.611,63.5z"/>
+	<rect x="144.5" y="192.5" width="112" height="32"/>
+	<rect x="144.5" y="384.5" width="160" height="32"/>
+	<rect x="144.5" y="320.5" width="129" height="32"/>
+	<rect x="144.5" y="256.5" width="208" height="32"/>
+</g>
+</svg>

js/copyToClipboard.js

@@ -0,0 +1,40 @@
+(function(){
+    var pre = document.getElementsByClassName('highlight');
+    for (var i = 0; i < pre.length; i++) {
+        var button         = document.createElement('button');
+        button.className   = 'copy-button';
+        button.textContent = 'Copy';
+
+        var div = pre[i].parentElement;
+        div.insertBefore(button, div.firstChild);
+    };
+
+    var copyCode = new Clipboard('.copy-button', {
+        target: function(trigger) {
+            return trigger.nextElementSibling;
+        }
+    });
+
+    // On success:
+    // - Change the "Copy" text to "Copied".
+    // - Swap it to "Copy" in 2s.
+
+    copyCode.on('success', function(event) {
+        event.clearSelection();
+        event.trigger.textContent = 'Copied';
+        window.setTimeout(function() {
+            event.trigger.textContent = 'Copy';
+        }, 2000);
+    });
+
+    // On error (Safari):
+    // - Change to "Unable to copy"
+    // - Swap it to "Copy" in 2s.
+
+    copyCode.on('error', function(event) {
+        event.trigger.textContent = 'Not supported';
+        window.setTimeout(function() {
+            event.trigger.textContent = 'Copy';
+        }, 5000);
+    });
+})();