Add Copy Button

[essesoul]

Prerequisites

Put an x into the box(es) that apply:

• This pull request fixes a bug.
• This pull request adds a feature.
• This pull request introduces breaking change.

Description

Click on the button to copy the content of the code block

One-click copying of the content of a block of code is achieved by creating the files static/css/clipboard.css and static/js/clipboard.js

Users can now quickly copy the contents of a block by clicking the button in the upper right corner of the block.

Checklist

Put an x into the box(es) that apply:

General

• Describe what changes are being made
• Explain why and how the changes were necessary and implemented respectively
• Reference issue with #<ISSUE_NO> if applicable

Resources

• If you have changed any SCSS code, run make release to regenerate all CSS files

Contributors

• Add yourself to CONTRIBUTORS.md if you aren't on it already

[luizdepra]

Nice, thank you.
But I will need to make some modifications like move the CSS code to SCSS, and overriding the code template to add the button instead of using JS to include it.

[septs]

i'm not a reviewer, but i think this is not elegant

1. i think it would be better to use js.Build preprocessing

{{-
$defines := dict
    "css_url" (resources.Get "js/clipboard.css").Permalink
-}}
{{- with resources.Get "js/clipboard.ts" (dict "defines" $defines) | js.Build | minify | fingerprint -}}
<script src="{{ .Permalink }}"></script>
{{- end -}}

2. use layouts/_default/_markup/render-codeblock.html hook, set page variable

{{- .Page.Store.Set "hasCodeblock" true -}}

see https://gohugo.io/render-hooks/code-blocks/

4. use javascript dynamic loading stylesheet

declare const css_url: string

const stylesheet = document.createElement("link")
stylesheet.rel = "stylesheet"
stylesheet.href = css_url
document.head.appendChild(stylesheet)

[jemus42]

I was just about to research how to add a code copy button when I found this --- is this still being considered?

[pduchnovsky]

clipboard.writeText(codeBlock.innerText)
must be
clipboard.writeText(codeBlock.textContent) instead

innerText can add extra line breaks or modify spacing due to CSS/rendering.
textContent preserves the exact formatting in the DOM — better for code blocks.

Anyway I already added this to my web repo directly and I like it, awesome.