feat(plugin): add copy to clipboard for highlighted code

includes/helpers/cdn.js

@@ -49,6 +49,9 @@ module.exports = function (hexo) {
             if (_package === 'pace-js') {
                 _package = 'pace';
             }
+            if (_package === 'clipboard') {
+                _package = 'clipboard.js';
+            }
         }
         if (provider !== null && cdn_providers.hasOwnProperty(provider)) {
             provider = cdn_providers[provider];

includes/specs/plugins.spec.js

@@ -59,5 +59,10 @@ module.exports = {
         [type]: 'boolean',
         [doc]: 'Show a loading progress bar at top of the page',
         [defaultValue]: true
+    },
+    clipboard: {
+        [type]: 'boolean',
+        [doc]: 'Show the copy button in the highlighted code area',
+        [defaultValue]: true
     }
 };

layout/plugin/clipboard.ejs

@@ -0,0 +1,6 @@
+<% if (plugin !== false) { %>
+    <% if (!head) { %>
+    <%- _js(cdn('clipboard', '2.0.4', 'dist/clipboard.min.js'), true) %>
+    <%- _js('js/clipboard', true) %>
+    <% } %>
+<% } %>

source/css/style.styl

@@ -232,6 +232,9 @@ img.thumbnail
 /* ---------------------------------
  *         Custom modifiers
  * --------------------------------- */
+.is-borderless
+    border: none
+
 .is-size-7
     font-size: 0.85rem !important
 
@@ -340,6 +343,7 @@ img.thumbnail
 figure.highlight
     padding: 0
     width: 100%
+    position: relative
     margin: 1em 0 1em !important
 
     pre,
@@ -393,6 +397,16 @@ figure.highlight
         min-width: inherit
         border-radius: inherit
 
+    .copy
+        display: none
+        position: absolute
+        bottom: 0
+        right: 0
+        color: white
+        background: rgba(0, 0, 0, 0.5)
+    &:hover .copy
+        display: block
+
 /* ---------------------------------
  *        Fix Gist Snippet
  * --------------------------------- */

source/js/clipboard.js

@@ -0,0 +1,8 @@
+document.addEventListener('DOMContentLoaded', function () {
+    $('figure.highlight').each(function () {
+        var id = 'code-' + Date.now() + (Math.random() * 1000 | 0);
+        $(this).attr('id', id);
+        $(this).prepend($(`<button class="button is-borderless is-radiusless is-small copy" data-clipboard-target="#${id} .code" title="Copy"><i class="fas fa-copy"></i></button>`));
+    });
+    new ClipboardJS('.highlight .copy');
+});