Adding Copy to Clipboard button to minimal-mistakes with clipboard.js

[dieghernan]

Following #2338, #2508 and #2766, I share here how to set up a "Copy to Clipboad" button on code chunks, using the plugin https://clipboardjs.com/.

• Live preview
• Repo

Note that this solution only works if you use rouge highlighting, see #2795 (comment) for an alternative approach if you use {% highlight %}.

On your _config.yml

Add these lines:

after_footer_scripts:
  - https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js
  - assets/js/clipboardrouge.js

On your repo

Copy to assets/js/clipboardrouge.js this script link

🎉 Build and enjoy

clipboardrouge.js explained

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function buttonBlink(btn, style) {
  btn.classList.remove("btn-light");
  btn.classList.add(style);
  await sleep(250); //Blink ms
  btn.classList.remove(style);
  btn.classList.add("btn-light");
}

These functions would be used to make the button blink for 250 ms after it is activated. The main goal is to make aware the visitor that the action has been succesful (on green) or not (on red).

// Select highlghted codes
var codeChunk = document.querySelectorAll("pre.highlight");

// Loop to add buttons
for (var i = 0; i < codeChunk.length; i++) {

  var pre = codeChunk.item(i);
  var btn = document.createElement("button");
  // Prepare button
  btn.innerHTML = "<i class='far fa-copy'></i>"; // Icon to be displayed on the button

  // Inline styling - may be a new css class, to be added in the next section
  btn.style.position = "absolute";
  btn.style.right = "1em";

  // Button: CSS - Add new classes
  btn.classList.add("btn", "btn--primary");

  // Identifier for ClipboardJS
  btn.setAttribute("data-clipboard-copy", "");

  // aria-label: btn.setAttribute("aria-label", "Copy to clipboard");
  // etc.

  // Insert button
  pre.insertBefore(btn, pre.firstChild);

}
// End

This is the critical part of the code. It selects all the <pre> tags of the page with class="highlight, and loops through all of them (for (var i = 0; i < codeChunk.length; i++)).

On each loop, a button is created after the <pre> tag (pre.insertBefore(btn, pre.firstChild);) with the fontawesome icon far fa-copy as the single content. After, we add to the button some css classes ("btn", "btn--primary" ), inline styling (style="position: absolute; right: 1em;) and a data-clipboard-copy attribute that would be the identifier used by clipboard.js.

More attributes, as arias or titles can be set with btn.setAttribute("attribute", "value");

// Copy to clipboard
var clipboard = new ClipboardJS("[data-clipboard-copy]", {
  target: function (trigger) {
    return trigger.nextElementSibling;
  }
});

// Messages and make the button blink
clipboard.on("success", function (e) {
  e.clearSelection();
  buttonBlink(e.trigger, "btn--success");
  console.info("Action:", e.action);
  console.info("Text:", e.text);
  console.info("Trigger:", e.trigger);
});

clipboard.on("error", function (e) {
  e.clearSelection();
  buttonBlink(e.trigger, "btn--danger");
  console.info("Action:", e.action);
  console.info("Trigger:", e.trigger);
});

This is the clipboard.js part (see their docs). When the button is activated, the nextElementSibling is copied.

nextElementSibling corresponds to the <code> part, as we have inserted the buttons after the <pre> and thus right before the <code>.

The following parts just adds additional actions after success or error. Here we use the function buttonBlink() to make the button blink on green (changes to btn--success) or red (btn--danger) for 250ms, as explained before.

Additionally, the console of the browser would show what it has been copied.

Example:

def print_hi(name)
puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.

Hope this can help. If considered (@mmistakes @iBug ) I could prepare a PR. It is a quite straightforward way to add a new feature to this project.

[iBug]

Looks like an easy solution to this highly-voted feature. One thing I'm not confident @mmistakes will like is that the library code is about 1k lines unminified. Since we're only using a subset of its features (and quite simple!), I'm sure there's a better way to write some smaller code for the same function. Maybe I could give it a try when I have time, but unfortunately not very soon.

[dieghernan]

I also found this solution with just a few lines of JavaScript but I didn't go further. It can be a possibility

https://www.w3schools.com/howto/howto_js_copy_clipboard.asp

[iBug]

I've written my own code for this. Check it out on my website (Wayback Machine). And here's my code. I haven't tested it extensively yet, but it looks decent at first glance.

There's one specific thing to check before it's good for PR. I don't know if the colors go on well with so many "skins" of the theme because I just set the button to white on my site. Maybe @mmistakes knows how to make this work.

I copied quite some code from both zenorocha/clipboard.js and squidfunk/mkdocs-material. Thanks to both projects!

P.S. Both projects mentioned above are MIT-licensed so we have nothing to worry about.

[dieghernan]

Awesome!! May I borrow that for my Jekyll template https://dieghernan.github.io/chulapa/? I would like to give it a try.

About the color of the button and the highlighter, I had also in mind as well. I guess it should be tested on the skins one by one

[iBug]

Feel free to take anything you would like to try - one small thing is that I'd appreciate a small credit to my source repo (iBug/iBug-source) 😄

[dieghernan]

Sure 😉 thanks

[jvanderaa]

Thank you for the write up! It worked like a champ right out of the gate, compared to the other posts that are out there this works perfectly with MM.

And I thank you for the explanation of the background as well. That is helpful.

Looking at this, there may be a way to get at the code blocks that are created with the Liquid tags as well? No big deal if it is not. Just thought I'd check before I go revamping previous blog posts. Updating the previous posts are just fine to do, and are probably a little more portable then if I needed to.

[dieghernan]

Umm, could you share a web page with the code chunks you mention? It should be a way:

var codeChunk = document.querySelectorAll("pre.highlight");

is valid in case your <pre> has a class="highlight", that is rouge syntax. Using:

var codeChunk = document.querySelectorAll("pre");

would select any <pre> but I would say it is not fully safe.

Ideally the codes you mention would have another specific class, but if there are bare tags it would be more complicated

[dieghernan]

[Updated]

In response to #2795 (comment) @jvanderaa about how to make it work with code blocks created with Liquid tags AKA {% highlight %},

See the full script here and the working demo here.

The code now select all the <pre> tags, following by a <code> block.

I still think this is not completely safe, but it does the job.

[iBug]

document.querySelectorAll("pre > code") saves some code as I did

[dieghernan]

Thanks! I have to say that I’m still a newbie on JS, so glad to learn new things

[dieghernan]

I updated the answer, much cleaner than my previous one.

[iBug]

Be aware that pre > code selects the <code> element rather than the parent element. Check my code here:

https://github.com/iBug/iBug-source/blob/9033ff61ea0aea9198c16fd1ac837d50485d253f/assets/js/clipboard.js#L50-L51

You can read more about CSS selectors on Mozilla Developer Network.

[dieghernan]

Like I said, still a newbie 😔

[iBug]

I wrapped my stuff up at #2812. Anyone interested can help test it out and hopefully it'll ship in the next version of Minimal Mistakes.

[reparke]

Just wanted to say thank you! This worked perfectly!

[crykn]

If anyone is looking for a version that doesn't depend on ClipboardJS, check out this gist. Using it is as simple as adding it to the after_footer_scripts. A live example can be found here.