Code Monkey home page Code Monkey logo

Comments (49)

talel-nasri avatar talel-nasri commented on June 22, 2024 6

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

from aleksandrhovhannisyan.com.

pippim avatar pippim commented on June 22, 2024 2

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!

from aleksandrhovhannisyan.com.

mark-plummer avatar mark-plummer commented on June 22, 2024 1

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!

from aleksandrhovhannisyan.com.

raghavmallampalli avatar raghavmallampalli commented on June 22, 2024 1

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);
    });
});

from aleksandrhovhannisyan.com.

RBrandon8 avatar RBrandon8 commented on June 22, 2024 1

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.

from aleksandrhovhannisyan.com.

nebulaOW avatar nebulaOW commented on June 22, 2024 1

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

from aleksandrhovhannisyan.com.

AleksandrHovhannisyan avatar AleksandrHovhannisyan commented on June 22, 2024 1

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

from aleksandrhovhannisyan.com.

talel-nasri avatar talel-nasri commented on June 22, 2024

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.

from aleksandrhovhannisyan.com.

AleksandrHovhannisyan avatar AleksandrHovhannisyan commented on June 22, 2024

@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?

from aleksandrhovhannisyan.com.

talel-nasri avatar talel-nasri commented on June 22, 2024

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?

from aleksandrhovhannisyan.com.

AleksandrHovhannisyan avatar AleksandrHovhannisyan commented on June 22, 2024

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.

from aleksandrhovhannisyan.com.

talel-nasri avatar talel-nasri commented on June 22, 2024

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

from aleksandrhovhannisyan.com.

AleksandrHovhannisyan avatar AleksandrHovhannisyan commented on June 22, 2024

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!

from aleksandrhovhannisyan.com.

mark-plummer avatar mark-plummer commented on June 22, 2024

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.

from aleksandrhovhannisyan.com.

AleksandrHovhannisyan avatar AleksandrHovhannisyan commented on June 22, 2024

@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?

from aleksandrhovhannisyan.com.

mark-plummer avatar mark-plummer commented on June 22, 2024

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:
image

from aleksandrhovhannisyan.com.

AleksandrHovhannisyan avatar AleksandrHovhannisyan commented on June 22, 2024

@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.

from aleksandrhovhannisyan.com.

AleksandrHovhannisyan avatar AleksandrHovhannisyan commented on June 22, 2024

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

image

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.

from aleksandrhovhannisyan.com.

AleksandrHovhannisyan avatar AleksandrHovhannisyan commented on June 22, 2024

@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.

from aleksandrhovhannisyan.com.

nebulaOW avatar nebulaOW commented on June 22, 2024

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.

from aleksandrhovhannisyan.com.

AleksandrHovhannisyan avatar AleksandrHovhannisyan commented on June 22, 2024

@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?

from aleksandrhovhannisyan.com.

nebulaOW avatar nebulaOW commented on June 22, 2024

@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

from aleksandrhovhannisyan.com.

AleksandrHovhannisyan avatar AleksandrHovhannisyan commented on June 22, 2024

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.

from aleksandrhovhannisyan.com.

nebulaOW avatar nebulaOW commented on June 22, 2024

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.

from aleksandrhovhannisyan.com.

AleksandrHovhannisyan avatar AleksandrHovhannisyan commented on June 22, 2024

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.

from aleksandrhovhannisyan.com.

nebulaOW avatar nebulaOW commented on June 22, 2024

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

from aleksandrhovhannisyan.com.

AleksandrHovhannisyan avatar AleksandrHovhannisyan commented on June 22, 2024

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.

from aleksandrhovhannisyan.com.

AleksandrHovhannisyan avatar AleksandrHovhannisyan commented on June 22, 2024

No problem, glad we got it working!

from aleksandrhovhannisyan.com.

gojimmypi avatar gojimmypi commented on June 22, 2024

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

image

from aleksandrhovhannisyan.com.

sachinms91 avatar sachinms91 commented on June 22, 2024

@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

from aleksandrhovhannisyan.com.

sachinms91 avatar sachinms91 commented on June 22, 2024

@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

from aleksandrhovhannisyan.com.

AleksandrHovhannisyan avatar AleksandrHovhannisyan commented on June 22, 2024

@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.

from aleksandrhovhannisyan.com.

sachinms91 avatar sachinms91 commented on June 22, 2024

@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')

from aleksandrhovhannisyan.com.

sachinms91 avatar sachinms91 commented on June 22, 2024

@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 :)

from aleksandrhovhannisyan.com.

marek-grzymala avatar marek-grzymala commented on June 22, 2024

image

from aleksandrhovhannisyan.com.

AleksandrHovhannisyan avatar AleksandrHovhannisyan commented on June 22, 2024

@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.

from aleksandrhovhannisyan.com.

marek-grzymala avatar marek-grzymala commented on June 22, 2024

@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.

from aleksandrhovhannisyan.com.

Sjors avatar Sjors commented on June 22, 2024

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/

from aleksandrhovhannisyan.com.

pippim avatar pippim commented on June 22, 2024

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.

from aleksandrhovhannisyan.com.

AleksandrHovhannisyan avatar AleksandrHovhannisyan commented on June 22, 2024

@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.

from aleksandrhovhannisyan.com.

pippim avatar pippim commented on June 22, 2024

@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.

from aleksandrhovhannisyan.com.

Achoobert avatar Achoobert commented on June 22, 2024

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

image

from aleksandrhovhannisyan.com.

tulimid1 avatar tulimid1 commented on June 22, 2024

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.

from aleksandrhovhannisyan.com.

gojimmypi avatar gojimmypi commented on June 22, 2024

@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.

from aleksandrhovhannisyan.com.

tulimid1 avatar tulimid1 commented on June 22, 2024

@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.

from aleksandrhovhannisyan.com.

gojimmypi avatar gojimmypi commented on June 22, 2024

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

Here's an example:

image

That particular example page is here.

Hope this helps.

from aleksandrhovhannisyan.com.

tulimid1 avatar tulimid1 commented on June 22, 2024

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).

from aleksandrhovhannisyan.com.

gojimmypi avatar gojimmypi commented on June 22, 2024

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.

from aleksandrhovhannisyan.com.

tulimid1 avatar tulimid1 commented on June 22, 2024

@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

from aleksandrhovhannisyan.com.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.