Adding a CopyButton feature

[yufi16]

What this PR does / why we need it:

Introducing a Copy button feature to quickly copy code snippets, reducing friction and saving time.

Which issue(s) this PR fixes:

#2022 -> flatcar/Flatcar#2022

Does this PR introduce a user-facing change?

Enhancing code blocks with distinct background, improving readability and visual clarity.

Special Notes for your Reviewer:

Incorporated suggested changes.

[tormath1]

Thanks for the PR, while I'm not a front-end developer, I'll delegate this PR review to @ervcz :)

[tormath1]

Let's avoid adding the .idea folder. We can .idea to the main .gitignore file.

[yufi16]

Thanks for sharing @tormath1
With a couple more changes, will stash them before opening the PR for review.

[John15321]

Linking it for visibility 😊 flatcar/Flatcar#2022

[sayanchowdhury]

Thanks a lot for the PR!

The implementation needs to change a bit, currently the copy button is rendered outside of the codeblock - which does not look good in UI terms.

It would be better to use a font-awesome icon and place it within.

Other thing is we use pygments, but you can switch over to use Hugo's highlight which give much more better themes for the code block.

[John15321]

Could you please remove the .idea folder from Git?

[John15321]

Hmm (when running locally), when I use the copy button it adds new lines to each of the lines after pasting it in:

http://localhost:1313/docs/latest/installing/vms/vagrant/#:~:text=List%20the%20status%20of%20the%20running%20machines%3A

[yufi16]

Hmm (when running locally), when I use the copy button it adds new lines to each of the lines after pasting it in:

http://localhost:1313/docs/latest/installing/vms/vagrant/#:~:text=List%20the%20status%20of%20the%20running%20machines%3A

Thanks for investigating, looking into this!

[sayanchowdhury]

Hmm (when running locally), when I use the copy button it adds new lines to each of the lines after pasting it in:

http://localhost:1313/docs/latest/installing/vms/vagrant#:~:text=List the status of the running machines%3A

I see that the innerText that you are using is returning a \n in the end - you could switch to textContent and check. For this example textContent returns me without the trailing newline.

or better just use trim() or trimEnd() to stay on the safer side.

[sayanchowdhury]

Dropped a few comments - it should look exactly how it looks but there is some redundant code which needs to be removed.

[yufi16]

Sure, on it!

[sayanchowdhury]

This would require to pull #548

@ervcz this PR would also require your review when you have spare cycles