Add copy buttons to code blocks

asset/css/markbind.css

@@ -11,6 +11,10 @@ code {
     word-break: normal;
 }
 
+pre {
+    position: relative;
+}
+
 pre.hljs > code {
     background: none;
 }
@@ -19,7 +23,6 @@ pre > code.hljs {
     -webkit-background-clip: padding-box; /* for Safari */
     background: ghostwhite;
     background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
-    border: 1px solid rgb(200, 200, 200);
     border: 1px solid rgba(200, 200, 200, 0.3);
     border-radius: 5px;
 }
@@ -52,6 +55,26 @@ kbd {
     color: #555;
 }
 
+pre .clipboard-icon {
+    position: absolute;
+    top: 4px;
+    z-index: 2;
+    cursor: pointer;
+    border: 1px solid transparent;
+    color: #ccc;
+    background-color: transparent;
+    height: 30px;
+    transition: all .25s ease-out;
+}
+
+pre .clipboard-icon:hover {
+    color: #555;
+}
+
+pre .clipboard-btn {
+    right: 10px;
+}
+
 code.hljs.inline {
     background: #f8f8f8;
     color: #333;

asset/js/setup.js

@@ -33,10 +33,30 @@ function setupAnchors() {
   });
 }
 
+function setupCopyButtonsForCodeBlocks() {
+  const clipboard = new ClipboardJS('.clipboard-btn', {
+    target(trigger) {
+      return trigger.parentNode.querySelector('code');
+    },
+  });
+
+  clipboard.on('success', (e) => {
+    const clipboardBtn = jQuery(e.trigger);
+    clipboardBtn.removeClass('fa fa-clipboard');
+    clipboardBtn.addClass('fa fa-clipboard-check');
+    e.clearSelection();
+    setTimeout(() => {
+      clipboardBtn.removeClass('fa fa-clipboard-check');
+      clipboardBtn.addClass('fa fa-clipboard');
+    }, 2000);
+  });
+}
+
 function executeAfterMountedRoutines() {
   flattenModals();
   scrollToUrlAnchorHeading();
   setupAnchors();
+  setupCopyButtonsForCodeBlocks();
 }
 
 function setupSiteNav() {

src/Page.js

@@ -32,6 +32,7 @@ const SITE_NAV_ID = 'site-nav';
 const TITLE_PREFIX_SEPARATOR = ' - ';
 
 const ANCHOR_HTML = '<a class="fa fa-anchor" href="#"></a>';
+const COPY_BUTTON_HTML = '<button class="fa fa-clipboard clipboard-icon clipboard-btn"></button>';
 const DROPDOWN_BUTTON_ICON_HTML = '<i class="dropdown-btn-icon">\n'
   + '<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>\n'
   + '</i>';
@@ -469,6 +470,19 @@ Page.prototype.addAnchors = function (content) {
   return $.html();
 };
 
+/**
+ * Adds copy buttons to code blocks in the page
+ * @param content of the page
+ */
+Page.prototype.addCopyButtons = function (content) {
+  const $ = cheerio.load(content, { xmlMode: false });
+  const codeBlockSelector = 'pre';
+  $(codeBlockSelector).each((i, codeBlock) => {
+    $(codeBlock).append(COPY_BUTTON_HTML);
+  });
+  return $.html();
+};
+
 /**
  * Records the dynamic or static included files into this.includedFiles
  * @param dependencies array of maps of the external dependency and where it is included
@@ -767,6 +781,7 @@ Page.prototype.generate = function (builtFiles) {
       .then(() => markbinder.renderFile(this.tempPath, fileConfig))
       .then(result => this.filterTags(this.frontMatter.tags, result))
       .then(result => this.addAnchors(result))
+      .then(result => this.addCopyButtons(result))
       .then((result) => {
         this.content = htmlBeautify(result, { indent_size: 2 });
 

src/Site.js

@@ -351,6 +351,8 @@ Site.prototype.createPage = function (config) {
                                     path.join(this.siteAssetsDestPath, 'js', 'bootstrap-vue.min.js')),
       polyfillJs: path.relative(path.dirname(resultPath),
                                 path.join(this.siteAssetsDestPath, 'js', 'polyfill.min.js')),
+      clipboardJs: path.relative(path.dirname(resultPath),
+                                 path.join(this.siteAssetsDestPath, 'js', 'clipboard.min.js')),
       setup: path.relative(path.dirname(resultPath),
                            path.join(this.siteAssetsDestPath, 'js', 'setup.js')),
       vue: path.relative(path.dirname(resultPath),

src/template/page.ejs

@@ -28,6 +28,7 @@
 <script src="<%- asset.bootstrapUtilityJs %>"></script>
 <script src="<%- asset.polyfillJs %>"></script>
 <script src="<%- asset.bootstrapVueJs %>"></script>
+<script src="<%- asset.clipboardJs %>"></script>
 <script>
     const baseUrl = '<%- baseUrl %>'
 </script>

test/test_site/expected/bugs/index.html

@@ -87,6 +87,7 @@ <h2 id="remove-extra-space-in-links">Remove extra space in links<a class="fa fa-
 <script src="..\markbind\js\bootstrap-utility.min.js"></script>
 <script src="..\markbind\js\polyfill.min.js"></script>
 <script src="..\markbind\js\bootstrap-vue.min.js"></script>
+<script src="..\markbind\js\clipboard.min.js"></script>
 <script>
     const baseUrl = '/test_site'
 </script>

test/test_site/expected/index.html

@@ -424,6 +424,7 @@ <h1 id="heading-in-footer-should-not-be-indexed">Heading in footer should not be
 <script src="markbind\js\bootstrap-utility.min.js"></script>
 <script src="markbind\js\polyfill.min.js"></script>
 <script src="markbind\js\bootstrap-vue.min.js"></script>
+<script src="markbind\js\clipboard.min.js"></script>
 <script>
     const baseUrl = '/test_site'
 </script>

test/test_site/expected/markbind/css/markbind.css

@@ -11,6 +11,10 @@ code {
     word-break: normal;
 }
 
+pre {
+    position: relative;
+}
+
 pre.hljs > code {
     background: none;
 }
@@ -52,6 +56,26 @@ kbd {
     color: #555;
 }
 
+pre .clipboard-icon {
+    position: absolute;
+    top: 4px;
+    z-index: 2;
+    cursor: pointer;
+    border: 1px solid transparent;
+    color: #ccc;
+    background-color: transparent;
+    height: 30px;
+    transition: all .25s ease-out;
+}
+
+pre .clipboard-icon:hover {
+    color: #555;
+}
+
+pre .clipboard-btn {
+    right: 10px;
+}
+
 code.hljs.inline {
     background: #f8f8f8;
     color: #333;