diff --git a/static/css/blog.css b/static/css/blog.css
index 61c603c170..520320837a 100644
--- a/static/css/blog.css
+++ b/static/css/blog.css
@@ -79,3 +79,10 @@ code.hljs {
 .hljs-meta .hljs-keyword,.hljs-meta-keyword {
     font-weight: 700
 }
+
+.hljs-copy {
+    position: absolute;
+    right: 0px;
+    color: black;
+    background-color: #CCC;
+}
\ No newline at end of file
diff --git a/static/js/copybutton-blog.js b/static/js/copybutton-blog.js
new file mode 100644
index 0000000000..aa1a598a4c
--- /dev/null
+++ b/static/js/copybutton-blog.js
@@ -0,0 +1,17 @@
+var snippets = document.getElementsByTagName('pre');
+var code_snippets = [];
+
+for (i = 0; i < snippets.length; i++) {
+    code_snippets[i] = snippets[i].innerText;
+    snippets[i].classList.add('hljs'); // append copy button to pre tag
+    snippets[i].innerHTML = '<button class="hljs-copy" id="' + i + '">Copy</button>' + snippets[i].innerHTML; // append copy button
+    snippets[i].getElementsByClassName('hljs-copy')[0].addEventListener("click", function () {
+        this.innerText = 'Copying';
+        navigator.clipboard.writeText(code_snippets[this.id]);
+        this.innerText = 'Copied!';
+        button = this;
+        setTimeout(function () {
+            button.innerText = 'Copy';
+        }, 1000)
+    });
+}