-
Notifications
You must be signed in to change notification settings - Fork 26
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to Add a Copy-to-Clipboard Button to Your Jekyll Blog #35
Comments
Hi Aleksander, Thank you for this amazing explanation. |
@talelhub Glad you enjoyed the read! One of the ways you could do this is by giving your If that still doesn't work, could you inspect |
Hi Aleksander, many thanks for your reply! 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. |
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 |
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. Paragraph1 |
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 |
Everything is working perfectly, kudos for the work you have done and Many thanks for your time! |
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. |
@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 |
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>. |
@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. |
sure @AleksandrHovhannisyan. I'm attaching my copyScript.js file, code.html include, and source view of the rendered HTML of Request{% capture code %}POST /ts_dataservice/v1/public/session HTTP/1.1 code.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! |
@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 |
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. document.addEventListener("DOMContentLoaded", function(event) {
document.querySelectorAll('.copy-code-button').forEach((copyCodeButton) => {
copyCodeButton.addEventListener('click', copyCode);
});
}); |
@raghavmallampalli Alternatively, I'd recommend putting your JavaScript at the end of your |
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:
to this
Then changing the javascript from:
to this
resolved the issue. |
I'm having an issue setting this up. For some reason it is showing in plaintext: It on the first code block on this page. Thanks for your time. |
@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 |
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 |
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. |
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. |
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. |
Yep, that makes perfect sense. Works great. Thank you so much for all your help. |
No problem, glad we got it working! |
I encountered an error in step
I believe it needs to be this:
otherwise, it was really helpful! thank you for sharing. Here's my first copy button with Jekyll |
@gojimmypi Good catch, thank you! I've corrected this in 78efb68. |
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:
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 Thank you for sharing your work! |
@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 |
@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 |
@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. |
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') |
Yeah got it thank you :) |
@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. |
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/ |
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. |
@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. |
@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 |
here's the link the the blog article: I don't know why it isn't linked to at the top of this issue? I got this github issue as my first google result. |
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. I appreciate any help. |
@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. |
@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. |
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). |
Hi @tulimid1 , can you please confirm where you put the new files? I don't seem to find them in your https://github.com/tulimid1/tulimid1.github.io/tree/master/_includes I'm not sure if other repos will be processed as GH Pages. |
@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 |
https://www.aleksandrhovhannisyan.com/blog/how-to-add-a-copy-to-clipboard-button-to-your-jekyll-blog/
The text was updated successfully, but these errors were encountered: