Syntax Highlighting and Copy Function in Hugo

1. ngclipboard - Angularjs directive for clipboard.js: I ignored this one as it is based on clipboard.js & is only applicable to an app which I neither have an idea what it is for nor what it is all about ;
2. clipboard.js — Copy to clipboard without Flash ; &
3. How to copy TEXT to Clipboard on Button-Click - CodePen
1. CodePen Approach
   I tested out the approach from the [3^rd URL] first. What I did was I copied the codes from the JS section and pasted it to a, let's say copy.js file and saved it in /static/js directory.

   I skipped the CSS part and copied the following codes to the header template (header.html) located in /layouts/partials directory:

   <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <script src="/js/copy.js"></script>

   
   I then created a file containing perl codes (let's save it as hello-perl.md) and assigned a copy button as well as a 'clip' id attribute to the <pre> tag:

   <button onclick="copyToClipboard('#clip')">Copy to Clipboard</button>
   
   <pre id="clip" class="line-numbers"><code class="language-perl"># Prints the message using two different delimeters.
   print "Hello, world!\n";
   print qq=Did you say "Hello?"\n=;
   </code></pre>

   
   The image below shows how it looked like when being viewed in the browser:

   

   Notice the “copyToClipboard(’#clip’)" assigned to the button onclick and the <pre id=“clip”> placed in the hello-perl.md file. It simply means that a bookmark (served as a target area) with the ‘clip’ id attribute is created for the <pre> tag and so the button will then function to copy all the codes placed after by the same bookmark.

   Here comes the ugly outcome of clicking the Copy to Clipboard button and having the copied contents pasted into an empty file using my nvim editor:-

   # Prints the message using two different delimeters.print "Hello, world!\n";print qq=Did you say "Hello?"\n=;Copy

   It did not preserve the original layout of the written codes where they got pasted in a continuous mode. Imagine there are 100 lines of codes to be copied, it will take a lot of work to correct the spaces.

2. Clipboard.js Approach
   Then, I tried out the clipboard.js library as described in the [2^nd URL]. I downloaded the zip file and included the extracted script as well as had it instantiated by putting the following lines into the header template, substituting the initial included scripts provided by CodePen above:-

   <!-- clipboard-button-->
   <script src="/js/clipboard.min.js"></script>
   
   <script>
   new Clipboard('.btn');
   </script>

   
   Using the same hello-perl.md file, I replaced the button onclick line with this,

   <button class="btn" data-clipboard-target="#clip">Copy to Clipboard</button>

   
   I opened the file in the browser, clicked the button, pasted the copied codes in an empty file, and yeay, it worked! The line layout was preserved as it should be.

<link href="/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
<script src="/js/jquery.min.js"></script>
<script src="/js/clipboard.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

<script>
// Tooltip

$('.btn').ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});

$('.btn').tooltip({
  trigger: 'click',
});

function setTooltip(message) {
  //$('.btn').tooltip('hide')
  $('.btn').tooltip('show')
    .attr('data-original-title', message)
    .tooltip('show');
}

function hideTooltip() {
  setTimeout(function() {
    $('.btn').tooltip('hide');
  }, 2000);
}

// Clipboard

var clipboard = new Clipboard('.btn');

clipboard.on('success', function(e) {
  setTooltip('Copied!');
  hideTooltip();
});

clipboard.on('error', function(e) {
  setTooltip('Failed!');
  hideTooltip();
});
</script>

{{ partial "copy.html" . }}

<button class="btn btn-default" data-clipboard-target="#clip" data-placement="bottom" data-toggle="tooltip" title="Copy to Clipboard" button type="button">
  <img src="/img/clippy.svg" width="15">
</button>

The difference is in order for the copy to clipboard function to work, changes have to be made to the way we assign a bookmark to the <pre> tag, because syntax highlighting works by a different approach where it uses the in-built shortcode called highlight.

So, as opposed to the client-side JavaScript libraries where a bookmark is added to the <pre> tag, we will now have it applied to the <div> tag like the following example:

<script src="/js/jquery.min.js"></script>
<script src="/js/clipboard.min.js"></script>

<script>

// Clipboard

new ClipboardJS('.main');

var copyCode = new ClipboardJS('.main', {
target: function(trigger) {
return trigger.previousElementSibling;
}
});

copyCode.on('success', function(event) {
    event.clearSelection();
    event.trigger.textContent = 'COPIED!';
    window.setTimeout(function() {
        event.trigger.textContent = 'COPY';
    }, 1000);
});

copyCode.on('error', function(event) { 
    event.trigger.textContent = 'Press "Ctrl + C" to copy';
    window.setTimeout(function() {
        event.trigger.textContent = 'COPY';
    }, 1000);
});

</script>

<br>
<button class="main" data-clipboard-target="#clip">
COPY
</button>

<div id="clip">
# Prints the message using two different delimeters.
print "Hello, world!\n";
print qq=Did you say "Hello?"\n=;
</div>

/* CUSTOM CSS */
button.main {
    opacity: 0.8;
    font-size: 0.7em;
    background: #000;
    color: #fff;
    border: 2px solid grey;
    padding: 2px 2px 0px 3px; 
    border-radius: 5px;
    float: right;
    overflow: hidden;
}

1# Prints the message using two different delimeters.
2print "Hello, world!\n";
3print qq=Did you say "Hello?"\n=;