How to Add a Copy-to-Clipboard Button to Your Jekyll Blog

[AleksandrHovhannisyan]

https://www.aleksandrhovhannisyan.com/blog/how-to-add-a-copy-to-clipboard-button-to-your-jekyll-blog/

[talel-nasri]

Hi Aleksander, Thank you for this amazing explanation.
I tried to add the feature, I have an issue with style.
I would like to delete the blank space between the geader containing the copy button and the code block so the button appear as an integrated component within the code block. Would you have recommendations to do so? Many thanks in advance for your help.

[AleksandrHovhannisyan]

@talelhub Glad you enjoyed the read!

One of the ways you could do this is by giving your .copy-code-container div a solid background color (and maybe setting its width to be 100%—not entirely sure if you need to). If there's still a gap between it and the code block below, you can give it a negative bottom margin equal to the gap. I currently do something similar on my own site.

If that still doesn't work, could you inspect .copy-code-container your browser's dev tools and show me a screenshot?

[talel-nasri]

Hi Aleksander, many thanks for your reply!
Modifying the bottom margin is working perfectly.

I have another issue, I have few code blocks in the same page and I noticed that the new feature is working for the first one but not for the other ones.
When copying the first code block, everything works fine (copy to copied and I can paste somewhere else), but when copying the second one nothing happens (no change from copy to copied and paste disabled). Any recommendations please for multiple code blocks use case?

[AleksandrHovhannisyan]

Hmm, interesting. Are you comfortable sharing a sample of the blog post in question? My only guess as to why this may be happening is that the first {% capture code %}{% endcapture %} is overriding subsequent ones.

[talel-nasri]

Thank you for your reply. I saved the file "code.html" in _includes (see attached its content, it contains html code and also js script CopyCode), and the css part in the style file.
Then I simply put my codes blocks in the markdown file as follows:

Paragraph1
Some text
{% capture code %}CodeBlock1{% endcapture %}
{% include code.html code=code lang="c#" %}
Paragraph2
Some text
{% capture code %}CodeBlock2{% endcapture %}
{% include code.html code=code lang="c#" %}

code.txt

[AleksandrHovhannisyan]

Ah, I would advise against putting the script in your include file (this may be part of the problem, but I'm not sure). This means your <script></script> block will get included on the page as many times as you have code blocks (e.g., if you have 4 code blocks, you'll have 4 duplicate scripts). What you really want is to add the script to your layout file for blog posts (e.g., _layouts/post.html) at the very bottom so that each blog post gets one copy of that script. Let me know if that makes sense!

[talel-nasri]

Everything is working perfectly, kudos for the work you have done and Many thanks for your time!

[mark-plummer]

Hi Aleksander. thanks so much for putting together this great tutorial. I've been trying to implement it on our Jekyll site following the steps you provided. I place code I want to make copyable between the {% capture code %} and {% endcapture %} tags and then immediately follow it with {% include code.html code=code lang="javascript" %}. The code does render on the page correctly, but for some reason, when I click the Copy button, the code is not copied (and the status inside the button does not change to Copied). Any ideas on what I might be doing wrong? thanks again.

[AleksandrHovhannisyan]

@mark-plummer No problem! Did you make sure to include the script on your page? I recommend doing this in your layout file for posts (in my case, that's _layouts/post.html). If you did include the script on the page but you're still running into this problem, could you open up your browser's developer tools (Ctrl+Shift+I on Windows and Cmd+Shift+I on Mac) and share a screenshot of the Console tab?

[mark-plummer]

Hi @AleksandrHovhannisyan . I am including the script on my layout page (which in my case, is called default.html). I'm including it the following way, based on my directory structure: <script src="/js/copyCode.js"></script>.

here is the output of my console:

[AleksandrHovhannisyan]

@mark-plummer Interesting... Nothing wrong there. Do you mind sharing some code samples for the copy script and your markup? Not sure what could be throwing things off, but I'm curious what's going on.

[mark-plummer]

sure @AleksandrHovhannisyan. I'm attaching my copyScript.js file, code.html include, and source view of the rendered HTML of
the page I'm working on.
First, here's my markup:

Request

{% capture code %}POST /ts_dataservice/v1/public/session HTTP/1.1
Host: client.mydomain.com Accept: application/json Content-type: application/json
{
"username":"",
"password":""
}{% endcapture %}
{% include code.html code=code lang="javascript"%}

code.html.zip
copyCode.js.zip
view-source_reference_tsload.html.zip

I love the fact that your solution can copy multiline (indented) code blocks, unlike the clipboard.js solution, so I'm keeping my fingers crossed that we can get it to work. thanks for any help you can provide!

[AleksandrHovhannisyan]

@mark-plummer Hmm, everything looks fine except for this comment that's missing a closing tag:

Could that be the issue? Try fixing it and let me know. Thanks!

Also, after you shared your code.html file, I realized that I'd neglected to update the tutorial and get rid of the h6 tags around the optional file name. I recommend replacing those with either a div or a span. Otherwise, you may end up in a situation where your document's heading levels go from, say, h3 to h6 all of a sudden, and that'll hurt your site's accessibility score. I've updated the blog post to reflect this, but I figured I'd let you know as well.

[raghavmallampalli]

For those not very comfortable with JS, you might have to wrap the querySelectorAll with a DOMContentLoaded listener. It didn't work for me until I did that, but worked perfectly once I did.
Basically, replace the last few lines of copyCode.js with the following

document.addEventListener("DOMContentLoaded", function(event) {
    document.querySelectorAll('.copy-code-button').forEach((copyCodeButton) => {
        copyCodeButton.addEventListener('click', copyCode);
    });
});

[AleksandrHovhannisyan]

@raghavmallampalli Alternatively, I'd recommend putting your JavaScript at the end of your <body> instead of loading it in your <head>. This guarantees that the DOM content has loaded by the time the JavaScript is parsed and executed.

[RBrandon8]

I had trouble with copy maintaining new lines when using the just-the-docs theme. With the code as is, it was pasting as one line. I found that changing the line in code.html from:

data-code="{{ include.code | escape }}"

to this

data-code="{{ include.code | uri_escape }}"

Then changing the javascript from:

tempTextArea.textContent = copyCodeButton.getAttribute('data-code');

to this

tempTextArea.textContent = decodeURI(copyCodeButton.getAttribute('data-code'));

resolved the issue.

[nebulaOW]

I'm having an issue setting this up. For some reason it is showing in plaintext: <div class='copy-code-container'>, then the button (which doesn't work) and then the closing div tag in plaintext.

It on the first code block on this page.
https://nebulaow.github.io/MrDestructo-Data/

Thanks for your time.

[AleksandrHovhannisyan]

@nebulaOW Are you comfortable sharing a sample of 1) your include file, and 2) some of the markdown where you're trying to use this?

[nebulaOW]

@nebulaOW Are you comfortable sharing a sample of 1) your include file, and 2) some of the markdown where you're trying to use this?

https://github.com/nebulaOW/nebulaOW.github.io/blob/master/_includes/code.html

https://github.com/nebulaOW/nebulaOW.github.io/blob/master/_posts/2021-01-15-MrDestructo-Data.md

[AleksandrHovhannisyan]

Oh, I think I know the problem. It looks like you're using Liquid 4.0's whitespace controls:

{%- capture code -%}{% raw %}conditions
{
    Is Dummy Bot(Event Player) == False;
}{% endraw %}{%- endcapture -%}  

Instead, you'll want to use {% capture %}, without the hyphens. I recently tried doing this on my end to clean up my output HTML, and it broke my site.

[nebulaOW]

Great that fixed the div issue. But now the button doesn’t seem to work. The button doesn’t change and doesn’t send the code to the clipboard.

[AleksandrHovhannisyan]

Did you include the script somewhere in the final output of your page? (e.g., in a layout file). I noticed you're using Minimal Mistakes based on the script at the bottom of your body, but you'll need to include your script in there.

[nebulaOW]

Yes I did on posts. https://github.com/nebulaOW/nebulaOW.github.io/blob/master/_layouts/posts.html

https://github.com/nebulaOW/nebulaOW.github.io/blob/master/assets/js/copyCode.js

[AleksandrHovhannisyan]

Oh, I see, that's probably the problem; you'll need to include it in a layout that eventually renders the post page itself. If this is your layout file for the page where you list all posts, then that won't do anything. Let me know if that makes sense.

[nebulaOW]

Yep, that makes perfect sense. Works great. Thank you so much for all your help.

[AleksandrHovhannisyan]

No problem, glad we got it working!

[gojimmypi]

I encountered an error in step 2 Copying to the Clipboard with JavaScript of How to Add a Copy-to-Clipboard Button to Jekyll for doing the actual copy:

window.navigator.writeText(code);

I believe it needs to be this:

 window.navigator.clipboard.writeText(code);

otherwise, it was really helpful! thank you for sharing. Here's my first copy button with Jekyll

[AleksandrHovhannisyan]

@gojimmypi Good catch, thank you! I've corrected this in 78efb68.

[pippim]

Using your handy "Copy" button on your blog I had all the files setup in five minutes. The only thing was the "Copy 📋" button didn't do anything. Then I read your comment:

@raghavmallampalli Alternatively, I'd recommend putting your JavaScript at the end of your instead of loading it in your

In two minutes everything was working perfectly :) I'm wondering if that instruction could be placed in the blog itself? Typically you see javascript always sourced in the <head> section.

Thank you for sharing your work!

[sachinms91]

@AleksandrHovhannisyan Thank you. The article was helpful. I was able to set up the copy button. I had to wrap copyCode.js file inside (document).ready(function() { .... }); because I was rendering copyCode.js inside head section instead on any of layout page

[sachinms91]

@AleksandrHovhannisyan Copy functionality is copying line numbers of code as well. Any idea how we can ignore line numbers while copying? Or I need to stop displaying line numbers

[AleksandrHovhannisyan]

@sachinms91 I recommend setting up a JavaScript bundler like esbuild or Webpack so you can reference scripts rather than putting inline JS in the head. But that's beyond the scope of this tutorial, so I didn't mention it. Not sure how to exclude line numbers.

[sachinms91]

@AleksandrHovhannisyan Copy functionality is copying line numbers of code as well. Any idea how we can ignore line numbers while copying? Or I need to stop displaying line numbers

Sorry. Ignore my question. I was able to get it working by changing code to

document.querySelectorAll('.rouge-code')[index].innerText rather than const codeBlocks = document.querySelectorAll('.code-header + .highlighter-rouge')

[sachinms91]

@sachinms91 I recommend setting up a JavaScript bundler like esbuild or Webpack so you can reference scripts rather than putting inline JS in the head. But that's beyond the scope of this tutorial, so I didn't mention it. Not sure how to exclude line numbers.

Yeah got it thank you :)

[marek-grzymala]

[AleksandrHovhannisyan]

@marek-grzymala Hi, thanks for posting; unfortunately, without additional context, I can't really help you determine what went wrong. The only thing I can think of is to make sure that you don't have any stray copy-to-clipboard buttons on their own, without an associated code block. I would also double-check that you're using Rouge as your highlighter. If not, you'll need to adjust the class name accordingly.

[marek-grzymala]

@marek-grzymala Hi, thanks for posting; unfortunately, without additional context, I can't really help you determine what went wrong. The only thing I can think of is to make sure that you don't have any stray copy-to-clipboard buttons on their own, without an associated code block. I would also double-check that you're using Rouge as your highlighter. If not, you'll need to adjust the class name accordingly.

Never mind, I managed to fix it.

[Sjors]

Google prominently returns this Github issue, but not the blog itself. You may want to link to it in the Issue description: https://www.aleksandrhovhannisyan.com/blog/how-to-add-a-copy-to-clipboard-button-to-your-jekyll-blog/

[pippim]

I received a comment on this issue today. I looked at the blog and see that the Copy button is now inside the fenced code block. Previously the button appeared above the code block. I can't see how the button is moving inside the code block now? The old code is quite different:

.copy-code-button {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    grid-column-gap: 4px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 8px;

    &::before {
        content: "Copy";
    }

    &::after {
        content: "📋";
        display: block;
    }

    // This class will be toggled via JavaScript
    &.copied {
        &::before { content: "Copied!"; }
        &::after { content: "✔️"; }
    }
}

The new code is quite sparse:

.copy-code-button {
  display: block;
}

I'd like the old style formatting but the new style of putting the Copy button inside the Rouge fenced code block. Unless someone has a ready solution, I'll start testing trial-and-error changes.

[AleksandrHovhannisyan]

@pippim It's been a while since I originally wrote this article. My current approach is to insert the buttons with JavaScript after the page loads. This makes positioning much easier, allows me to hide the buttons until a user hovers/focuses, and also doesn't bother rendering them if someone's viewing an article with JS disabled for some reason. I may one day repurpose this article as a more generic "How to add a copy-to-clipboard button to a Markdown blog" type of post.

[pippim]

@AleksandrHovhannisyan Thank you for the quick reply. I think I found what you are talking about in your JavaScript. I will study the code and see how to update your previous version without .mjs support (whatever that is) and using vanilla JavaScript instead.

[Achoobert]

here's the link the the blog article: I don't know why it isn't linked to at the top of this issue?
https://www.aleksandrhovhannisyan.com/blog/how-to-add-a-copy-to-clipboard-button-to-your-jekyll-blog/

I got this github issue as my first google result.
10/10 thanks for the guide aleksandr!
I got it working in 10 minutes with a little bit of tweaking and CSS

[tulimid1]

I know it's been a while since this was posted, but could you help me out? I want to add a copy-to-clipboard button to my documentation pages. I don't know much (anything) about website building. I've tried to implement using your steps (except adding script tag to pages instead of posts), but it is not working and I have no idea what I am doing wrong.

Here is where I am trying to implement.
Here is where the source code is.

I appreciate any help.

[gojimmypi]

@tulimid1 I have a small script to do the copy in the footer of my blog that may be a helpful example.

If you are new to coding web pages, perhaps you've not seen the single step debugging features? Personally I prefer Chrome for this. It can be really helpful to set breakpoints and examine variables line by line.

[tulimid1]

@gojimmypi Thanks for the help. I tried to implement some of your code, but it was unsuccessful. I added the footer.html to _includes, but I am unsure what other steps I would need to take to be successful.

[gojimmypi]

Note there's a {% include code_header.html %} included just above every segment to copy to clipboard.

Here's an example:

That particular example page is here.

Hope this helps.

[tulimid1]

Yes, when I do that, a button shows up on the website above the code, but it does not have any functionality (i.e., i click it, but nothing is copied to the clipboard).

[gojimmypi]

Hi @tulimid1 , can you please confirm where you put the new files? I don't seem to find them in your _includes:

https://github.com/tulimid1/tulimid1.github.io/tree/master/_includes

I'm not sure if other repos will be processed as GH Pages.

[tulimid1]

@gojimmypi Yes. Currently I am just testing this out on one of my documentation repos.

You should be able to find the codeHeader.html and footer.html here

And the website for this page can be found here