Add copy content links to my code snippets

Many blogs are like this one, where they contain a few code snippets that readers might want to copy to their clipboard to re-use somewhere else.

This article describes a custom HTML gadget that will automatically add the material design icon as a copy-to-clipboard link, for any <code> tags in the content.

Note: This gadget assumes that all the code tags have a relatively-positioned container. In this blog, all the <code> tags are nested in <pre> tags, which are relatively positioned.

Material Design font

While Blogger's new templates feature a range of the material design icons, they don't offer all of them - the Material icons guide notes that you can massively reduce the size of the SVG by only using the ones you need.

The web-font does weigh in at ~56KB, but you user will benefit from it being cached by any other website they have visited that also uses the font.

<link href='https://fonts.googleapis.com/icon?family=Material+Icons'
      rel='stylesheet' />

The custom HTML gadget

<script>
  // Load Clipboard if we haven't already got it.
window.setTimeout(function() {
  if (typeof Clipboard !== 'undefined') {
    return;
  }
  var s = document.createElement('script');
  s.src = 'https://cdn.rawgit.com/zenorocha/clipboard.js/v1.6.1/dist/clipboard.min.js';
  document.querySelector('head').appendChild(s);
}, 500);
</script>
<script>
window.setTimeout(function() {
  if (typeof Clipboard === 'undefined' || !Clipboard) {
    return;
  }
  var codes = document.querySelectorAll('code');
  if (!codes || codes.length < 1) return;
  // Load material font.
  var l = document.createElement('link');
  l.rel = 'stylesheet';
  l.href = 'https://fonts.googleapis.com/icon?family=Material+Icons';
  document.querySelector('head').appendChild(l);
  // Add copy-to-clipboard links.
  codes
    .forEach(c => {
      var copyLink = document.createElement('div');
      copyLink.setAttribute('class', 'copy');
      copyLink.innerHTML = '&#xE14D;';
      copyLink.title = 
          _WidgetManager._GetAllData().messages.copy || 'Copy';
      c.parentElement.insertBefore(copyLink, c);
      var clipboard = new Clipboard(copyLink, {
        text: function(trigger) {
          return c.innerText;
        }
      });
      clipboard.on('success', e => {
        alert(
            _WidgetManager._GetAllData().messages.copiedToClipboard
                || 'Copied to clipboard');
      });
    });
}, 3000);
</script>
<style>
  pre .copy {
    font-family: 'Material Icons';
    font-size: 24px;
    position: absolute;
    right: 0;
    margin: 8px;
    cursor: pointer;
  }
  pre .copy:not(:hover) {
    opacity: 0.4;
  }
</style>





Happy code-snippeting!

Comments

Popular posts from this blog

Filter out certain labels from my Blog Homepage

Change the landing page of my blog

Get Facebook to show feature image for your Blog's Homepage