-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Add Copy Button #911
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add Copy Button #911
Conversation
Click on the button to copy the content of the code block
...into essesoul-dev
luizdepra
commented
May 17, 2024
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
septs
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i'm not a reviewer, but i think this is not elegant
- i think it would be better to use
js.Buildpreprocessing
{{-
$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 -}}
- use
layouts/_default/_markup/render-codeblock.htmlhook, set page variable
{{- .Page.Store.Set "hasCodeblock" true -}}
see https://gohugo.io/render-hooks/code-blocks/
- 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
commented
Mar 8, 2025
I was just about to research how to add a code copy button when I found this --- is this still being considered?
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.
Prerequisites
Put an
xinto the box(es) that apply: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.cssandstatic/js/clipboard.jsUsers can now quickly copy the contents of a block by clicking the button in the upper right corner of the block.
Checklist
Put an
xinto the box(es) that apply:General
#<ISSUE_NO>if applicableResources
make releaseto regenerate all CSS filesContributors
CONTRIBUTORS.mdif you aren't on it already