diff --git a/docs/_document.html b/docs/_document.html
index 095e9c7a..075ea9d5 100644
--- a/docs/_document.html
+++ b/docs/_document.html
@@ -80,32 +80,6 @@
             <div id="content"><!--{{content}}--></div>
         </div>
     </div>
-    <script>
-        var match = new RegExp('#/(.+)\\.md(.*)', 'g').exec(window.location.hash);
-        if (match && match[1]) {
-            // Redirect from URL format to new URL, for example:
-            // Old: https://marked.js.org/#/USING_PRO.md#renderer
-            // New: https://marked.js.org/using_pro#renderer
-            var pageName = match[1].toLowerCase();
-            var sectionName = match[2];
-            window.location.href = '/' + pageName + sectionName;
-        }
-
-        var navLinks = document.querySelectorAll('nav a');
-
-        function hashChange() {
-            var fullUrl = window.location.href;
-            navLinks.forEach(function(link) {
-                link.className = link.href === fullUrl ? 'selected' : '';
-            });
-        }
-
-        window.addEventListener('hashchange', function (e) {
-            e.preventDefault();
-            hashChange();
-        });
-
-        hashChange();
-    </script>
+    <script src="/js/index.js"></script>
 </body>
 </html>
diff --git a/docs/css/style.css b/docs/css/style.css
index 16777e53..0bb1bdd2 100644
--- a/docs/css/style.css
+++ b/docs/css/style.css
@@ -94,6 +94,7 @@ pre {
     line-height: 1.45;
     background-color: #f6f8fa;
     border-radius: 3px;
+    position: relative;
 }
 
 code:not([class]) {
@@ -104,4 +105,97 @@ code:not([class]) {
     border-radius: 3px;
 }
 
-.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
+.github-corner:hover .octo-arm {
+    animation:octocat-wave 560ms ease-in-out;
+}
+
+@keyframes octocat-wave {
+    0%,100%{transform:rotate(0)}
+    20%,60%{transform:rotate(-25deg)}
+    40%,80%{transform:rotate(10deg)}
+}
+
+@media (max-width:500px) {
+    .github-corner:hover .octo-arm {
+        animation:none
+    }
+    
+    .github-corner .octo-arm {
+        animation:octocat-wave 560ms ease-in-out;
+    }
+}
+
+.div-copy {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+.div-copy .icon-copy {
+    opacity: 0;
+    transition: opacity .3s;
+    height: 18px;
+    width: 18px;
+    cursor: pointer;
+    padding: 5px;
+}
+
+.div-copy.active .icon-copy {
+    opacity: 1;
+}
+
+.div-copy .tooltip-copy {
+    position: relative;
+}
+
+.div-copy .tooltip-copy::before {
+    content: "Copied";
+    position: absolute;
+    
+    /* vertically center */
+    top: 50%;
+    transform: translateY(-50%);
+    
+    /* move to right */
+    right: 100%;
+    margin-right: 5px; /* and add a small left margin */
+    
+    /* basic styles */
+    padding: 2px 7px;
+    border-radius: 5px;
+    background: #444;
+    color: #fff;
+    text-align: center;
+  
+    opacity: 0; /* hide by default */
+    transition: opacity .3s;
+}
+
+.div-copy.click .tooltip-copy::before {
+    opacity: 1;
+}
+
+.div-copy .tooltip-copy::after {
+    content: "";
+    position: absolute;
+    
+    /* position tooltip correctly */
+    right: 100%;
+    margin-right: -5px;
+   
+    /* vertically center */
+    top: 50%;
+    transform: translateY(-50%);
+   
+    /* the arrow */
+    border-style: solid;
+    border-width: 2px 2px 5px 8px;
+    border-color: transparent transparent transparent #444;
+    
+    opacity: 0;
+    transition: opacity .3s;
+}
+
+.div-copy.click .tooltip-copy::after {
+    opacity: 1;
+}
diff --git a/docs/img/copy-icon.svg b/docs/img/copy-icon.svg
new file mode 100644
index 00000000..f23e8f28
--- /dev/null
+++ b/docs/img/copy-icon.svg
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<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"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<g id="Text-files">
+	<path d="M53.9791489,9.1429005H50.010849c-0.0826988,0-0.1562004,0.0283995-0.2331009,0.0469999V5.0228
+		C49.7777481,2.253,47.4731483,0,44.6398468,0h-34.422596C7.3839517,0,5.0793519,2.253,5.0793519,5.0228v46.8432999
+		c0,2.7697983,2.3045998,5.0228004,5.1378999,5.0228004h6.0367002v2.2678986C16.253952,61.8274002,18.4702511,64,21.1954517,64
+		h32.783699c2.7252007,0,4.9414978-2.1725998,4.9414978-4.8432007V13.9861002
+		C58.9206467,11.3155003,56.7043495,9.1429005,53.9791489,9.1429005z M7.1110516,51.8661003V5.0228
+		c0-1.6487999,1.3938999-2.9909999,3.1062002-2.9909999h34.422596c1.7123032,0,3.1062012,1.3422,3.1062012,2.9909999v46.8432999
+		c0,1.6487999-1.393898,2.9911003-3.1062012,2.9911003h-34.422596C8.5049515,54.8572006,7.1110516,53.5149002,7.1110516,51.8661003z
+		 M56.8888474,59.1567993c0,1.550602-1.3055,2.8115005-2.9096985,2.8115005h-32.783699
+		c-1.6042004,0-2.9097996-1.2608986-2.9097996-2.8115005v-2.2678986h26.3541946
+		c2.8333015,0,5.1379013-2.2530022,5.1379013-5.0228004V11.1275997c0.0769005,0.0186005,0.1504021,0.0469999,0.2331009,0.0469999
+		h3.9682999c1.6041985,0,2.9096985,1.2609005,2.9096985,2.8115005V59.1567993z"/>
+	<path d="M38.6031494,13.2063999H16.253952c-0.5615005,0-1.0159006,0.4542999-1.0159006,1.0158005
+		c0,0.5615997,0.4544001,1.0158997,1.0159006,1.0158997h22.3491974c0.5615005,0,1.0158997-0.4542999,1.0158997-1.0158997
+		C39.6190491,13.6606998,39.16465,13.2063999,38.6031494,13.2063999z"/>
+	<path d="M38.6031494,21.3334007H16.253952c-0.5615005,0-1.0159006,0.4542999-1.0159006,1.0157986
+		c0,0.5615005,0.4544001,1.0159016,1.0159006,1.0159016h22.3491974c0.5615005,0,1.0158997-0.454401,1.0158997-1.0159016
+		C39.6190491,21.7877007,39.16465,21.3334007,38.6031494,21.3334007z"/>
+	<path d="M38.6031494,29.4603004H16.253952c-0.5615005,0-1.0159006,0.4543991-1.0159006,1.0158997
+		s0.4544001,1.0158997,1.0159006,1.0158997h22.3491974c0.5615005,0,1.0158997-0.4543991,1.0158997-1.0158997
+		S39.16465,29.4603004,38.6031494,29.4603004z"/>
+	<path d="M28.4444485,37.5872993H16.253952c-0.5615005,0-1.0159006,0.4543991-1.0159006,1.0158997
+		s0.4544001,1.0158997,1.0159006,1.0158997h12.1904964c0.5615025,0,1.0158005-0.4543991,1.0158005-1.0158997
+		S29.0059509,37.5872993,28.4444485,37.5872993z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/docs/js/index.js b/docs/js/index.js
new file mode 100644
index 00000000..8e46ca2c
--- /dev/null
+++ b/docs/js/index.js
@@ -0,0 +1,55 @@
+
+var match = /#\/(.+)\\.md(.*)/g.exec(window.location.hash);
+if (match && match[1]) {
+  // Redirect from URL format to new URL, for example:
+  // Old: https://marked.js.org/#/USING_PRO.md#renderer
+  // New: https://marked.js.org/using_pro#renderer
+  var pageName = match[1].toLowerCase();
+  var sectionName = match[2];
+  window.location.href = '/' + pageName + sectionName;
+}
+
+var navLinks = document.querySelectorAll('nav a');
+
+function hashChange() {
+  var fullUrl = window.location.href;
+  navLinks.forEach(function(link) {
+    link.className = link.href === fullUrl ? 'selected' : '';
+  });
+}
+
+window.addEventListener('hashchange', function(e) {
+  e.preventDefault();
+  hashChange();
+});
+
+hashChange();
+
+document.addEventListener('DOMContentLoaded', function() {
+  var div = document.createElement('div');
+  div.innerHTML = '<div class="tooltip-copy"><img src="/img/copy-icon.svg" class="icon-copy" title="Click to Copy" /></div>';
+  div.className = 'div-copy';
+
+  var allPres = document.querySelectorAll('pre');
+  allPres.forEach(function(pre) {
+    var timeout = null;
+    var copy = div.cloneNode(true);
+    pre.appendChild(copy);
+    pre.onmouseover = function() {
+      copy.classList.add('active');
+    };
+    pre.onmouseleave = function() {
+      clearTimeout(timeout);
+      copy.classList.remove('active');
+      copy.classList.remove('click');
+    };
+    copy.onclick = function() {
+      navigator.clipboard.writeText(pre.textContent);
+      copy.classList.add('click');
+      clearTimeout(timeout);
+      timeout = setTimeout(function() {
+        copy.classList.remove('click');
+      }, 3000);
+    };
+  });
+});