Copy code button

[mansoorbarri]

fixes: Add a copy button to code snippet #494

files changed:

• static/css/main.css
• static/js/main.css

screenshot:

from: /post/2017-03-07-bigimg-sample/

[hydr0nium]

@mansoorbarri
Pretty could idea but I would like to propose some changes if possible:

• replace Copy text with something like nice icon. Maybe something like this: 💾 could be used or similar. Could also be done via an option what to display
• Show the copy button only if the code box is hovered.

[henryiii]

When I've done this in the past, I also filtered the beginning stuff from console.

$ echo "hi"
hi

Should only copy echo "hi".

[mansoorbarri]

@mansoorbarri Pretty could idea but I would like to propose some changes if possible:

• replace Copy text with something like nice icon. Maybe something like this: 💾 could be used or similar. Could also be done via an option what to display
• Show the copy button only if the code box is hovered.

updated as requested.

[hydr0nium]

Everything looks good now but is it on purpose that it is below the code?

Because I would still put it IN the code block. If that is fixed I would say it should be merge into main.

[mansoorbarri]

not expected behaviour, let me have a look at it. it should always show on the top right.

[mansoorbarri]

please have a look now. I couldn't find the particular post in the example site so this is just a blind fix.

[hydr0nium]

First of all sorry for the confusion. The picture was an example of my own website. I probably should have tested it with the exampleSite. It is fixed now but I think your code was good even before. I believe the culprit at work was browser caching 🎉 as it probably cached some CSS, JS, etc wrong. After doing a hard reload today it worked fine.

But I've noticed some more things:

• When copying on the example site and then pasting it, the code that is pasted has some spaces in front of each line
• When copying the example with the line numbers, the line numbers are copy also.

I am not sure how fixable these things are though

[mansoorbarri]

can you let me know the blog you are copying from?

[hydr0nium]

I copied it from the default examples sites of the beautiful hugo sites. this post

[mansoorbarri]

fixed

[hydr0nium]

Works like a charm now. In my opinion this can be added @henryiii

[henryiii]

Thanks both!