Copy of code snippet in Jekyll

Trying to follow several resources [1, 2] for setting up the code snippet copy capability in Jekyll site, but for some reason, I could not get it working. I suppose this may be something to do with theme I am using (the beautiful-jekyll theme), and I am not what to tune to make it working with the code snippet copy function posted by others (see Ref. [1, 2]). Instead of struggling with those minor tunes, I am using a separate routine for such a purpose, without any involvement with CSS styling, etc.
To enable the code snippet copy in GitHub pages using my current way, we need to include the corresponding Javascript in our page header. Taking my current blog as an example (one can go to MORE LINKS \(\rightarrow\) BLOG REPO to visit the GitHub repo for current blog), in the header part of each post, it is specified the layout is post. We then can find post.html in the _layouts directory which includes the definition for the outlook of a post. There, in the header part, one can find it is further pointing to the base layout which then refers to the base.html file under _layouts. Opening the base.html file, we can find that it includes the head.html file (which fundamentally defines the <header> section in the rendered HTML file). The head.html file can be found under _includes directory.
First, we need to put the following Javascript codes into the <header> section of the head.html file,

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<script async='async' src='https://www.gstatic.com/external_hosted/clipboardjs/clipboard.min.js'></script>
<script src='https://unpkg.com/sweetalert@2.1.2/dist/sweetalert.min.js'></script>
<script language='JavaScript'>
  function copytoclipboard(containerid){
    if (document.selection) {
      var range = document.body.createTextRange();
      range.moveToElementText(document.getElementById(containerid));
      range.select().createTextRange();
      document.execCommand("copy");
    } else if (window.getSelection) {
      var range = document.createRange();
      range.selectNode(document.getElementById(containerid));
      var selection = window.getSelection() // get Selection object from currently user selected text
      selection.removeAllRanges() // unselect any user selected text (if any)
      selection.addRange(range) // add range to Selection object to select it
      document.execCommand("copy");
      //alert("Codes snippet copied to clipboard!")
      swal({
      title: "",
      text: "Codes snippet copied to clipboard!",
      icon: "success",
      });
    }
  }
</script>

Here is where I put those lines in the head.html file, Click Me.
Then, as what I have above in current blog, we need to put down a button to link to the copytoclipboard function defined in the Javascript we just included. Here follows is the code for the button, which we can directly grab and put into our blog post (see here for the implementation in current blog)

1
2
3

<div align="right">
<button onclick="javascript:copytoclipboard('csp2')" style="border: none">Copy snippet to clipboard!</button>
</div>

Then, we need to go to the hilite.me website, where we can paste in our code snippet and the website will help us turning that into HTML codes with language specific grammar highlighting. From there, we can then copy those HTML codes and directly paste them into our blog post, like what I have here for the current blog (the first Javascript code snippet above).
Finally, to link the copytoclipboard function associated with a certain button to copy a specific block of codes, we need to add in a unique ID into the pasted HTML codes from hilite.me, like what I have here for the current blog (again, the first Javascript code snippet above). Then the function parameter for copytoclipboard needs to be consistent with the code block that we want to copy by clicking on the button - see here, again, for the the first Javascript code snippet above.

N. B. The ID for the pasted code from hilite.me should go to EXACTLY the <td> section as presented in the link here.

N. B. Those pasted HTML from hilite.me was changed a bit across all posts in my blog to remove the padding space of the code block - specifically it is this bit padding:.0em .0em; in here.