add copy codeblock button

_config.yml

@@ -277,10 +277,12 @@ symbols_count_time:
   awl: 4
   wpm: 275
 
-# Manual define the border radius in codeblock
-# Leave it empty for the default 1
 codeblock:
+  # Manual define the border radius in codeblock
+  # Leave it empty for the default 1
   border_radius:
+  # Add copy button on codeblock
+  copy_button: true
 
 # Wechat Subscriber
 #wechat_subscriber:

languages/en.yml

@@ -35,6 +35,7 @@ post:
   views: Views
   comments_count: Comments
   related_posts: Related Posts
+  copy_button: Copy
   copyright:
     author: Post author
     link: Post link

languages/zh-TW.yml

@@ -35,6 +35,7 @@ post:
   total_symbols: 網站總字數
   total_time: 網站總閱讀時間
   related_posts: 相關文章
+  copy_button: 複製
   copyright:
     author: 作者
     link: 文章連結

layout/_layout.swig

@@ -96,5 +96,6 @@
   {% include '_third-party/scroll-cookie.swig' %}
   {% include '_third-party/exturl.swig' %}
   {% include '_third-party/bookmark.swig' %}
+  {% include '_third-party/copy-code.swig' %}
 </body>
 </html>

layout/_third-party/copy-code.swig

@@ -0,0 +1,56 @@
+{% if theme.codeblock.copy_button %}
+  <style>
+    .copy-btn {
+        position: relative;
+        display: inline-block;
+        padding: 6px 12px;
+        font-size: 13px;
+        font-weight: 700;
+        line-height: 20px;
+        color: #333;
+        white-space: nowrap;
+        vertical-align: middle;
+        cursor: pointer;
+        background-color: #eee;
+        background-image: linear-gradient(#fcfcfc, #eee);
+        border: 1px solid #d5d5d5;
+        border-radius: 3px;
+        user-select: none;
+    }
+
+    .highlight {
+        position: relative;
+    }
+
+    .highlight .copy-btn {
+        transition: opacity .3s ease-in-out;
+        opacity: 0;
+        padding: 2px 6px;
+        position: absolute;
+        right: 4px;
+        top: 8px;
+    }
+
+    .highlight:hover .copy-btn,
+    .highlight .copy-btn:focus {
+        opacity: 1
+    }
+  </style>
+  <script>
+    $('.highlight').prepend($('<button>').addClass('copy-btn').append('{{__("post.copy_button")}}').on('click', function(e) {
+      var code = $(e.target).parent().find('.code').find('.line').map(function(i, e){
+        return $(e).text()
+      }).toArray().join('\n')
+      var ta = document.createElement('textarea')
+      document.body.appendChild(ta)
+      ta.style.position = 'fixed'
+      ta.style.top = 0
+      ta.style.left = 0
+      ta.value = code
+      ta.select()
+      ta.focus()
+      document.execCommand('copy')
+      document.body.removeChild(ta)
+    }))
+  </script>
+{% endif %}