search

lukeorth / poison

Professional Hugo theme for dev bloggers. Based on Mdo's classic Hyde theme.
https://poison.lukeorth.com
GNU General Public License v3.0
198 stars 98 forks source link

Implement copy button for code blocks #136

Closed JMicheli closed 11 months ago

JMicheli commented 11 months ago

This is largely in response to Issue #63, which discussed an attempt to add a copy button to code that wasn't successful.

I spent a bit exploring this and was able to add a button to code blocks that copies their contents. It required adding a new JavaScript file that searches for and modifies code blocks to add the button, as well as CSS to style the button. In the process, I changed syntax.css > codeblock.css and added my styles there to avoid cluttering things.

The button icon is sourced from Google's free material icons, which I do not think poses any licensing issues. When the button is pressed, it grabs the content of the code block and writes it to the clipboard. An improvement here that I wasn't able to make might be some sort of visual feedback when the button is clicked.

lukeorth commented 11 months ago

Wow thank you, @JMicheli. Another great contribution!

I tweaked it just a bit and added a check mark animation when a user copies data. Let me know what you think, and feel free to update it if you think something needs changing. Otherwise I'll get this merged.

JMicheli commented 11 months ago

Nice, I think that makes it feel a lot more active. I noticed that you used a svg image for the success icon so I grabbed one for the copy icon as well, replacing the png icon. Good to merge!

lukeorth commented 11 months ago

Perfect - thanks again! :tada: