Copy button to allow copying the content

support
1

I want to add a copy button to allow copying the text (in my case, coding) that I put in a post.
Is there any (possible simply) way?

2

Have a look at the following article about adding a copy to clipboard button in a Hugo project.

https://www.dannyguo.com/blog/how-to-add-copy-to-clipboard-buttons-to-code-blocks-in-hugo/

Also this forum topic:

1 Like
3

Thanks.
Itā€™s not clear to me how to use the pieces of code that I see on the page you linked and particularly How to Add Copy to Clipboard Buttons to Code Blocks in Hugo

I suppose that each piece of code is a file, but itā€™s not clear what kind of file (java, html, json) and where they should be saved.
I apologize, but I am not a developer :slight_smile:

4

The source of the website I linked to above is publc.

You need to use the following -modified as per your projectā€™s structure-ā€¦

  1. The source JS file is here

  2. The CSS rules for the button.

  3. In the baseof.html template a block has been allocated for the copy button JS.

  4. In the single page template the above block is defined and the copy button JS is called.

P.S. There are plenty of people who use Hugo that are not developers by vocation -myself included-. So no need for apologies.

1 Like
5

Running hugo server I receive the error highlighting that is missing partial "js.html"
I am using the theme ā€œPaperModā€, as you can see here hugo-PaperMod/layouts/partials at master Ā· adityatelange/hugo-PaperMod Ā· GitHub there isnā€™t a file named js.html.
What do you suggest?

6

Above I pointed you to include only line 30 of baseof.html.

Line 29 contains a {{ partial "js.html" . }} .

If you copied it by accident then you need to remove the line with that partial from your template.

7

Thank you.
I did it, but now the layout is changed, and I donā€™t like it.
Secondly, the copy button doesnā€™t appear anyway.
I will delete the files I added.

8

Can you post a link to a repo, so that I can have a look?

9

My repo is here GitHub - nicfab/myhugo
Please, consider that I have already deleted those files.

10

I sent you a pull request with all the necessary additions.

The copy button works fine on my end.

See: http://localhost:1313/post/hugo/

Have a look at my PR and either merge it as is or study it and amend it as needed.

Basically the idea is to keep the Papermod theme directory without modificatio -you may want to update it in the future-.

The themeā€™s templates that need to be overridden now reside in a /layouts/ directory directly under the root of your project.

The copy code button CSS resides under /assets/ and the JS in /static/.

11

Thank you.
Before I commit your work, I would understand.
Do you mean that:

  1. the extra.css file should be in /themes/PaperMod/assets/css ?
  2. the head.html file should overwrite the same in /themes/PaperMod/layout/partials/ ?
  3. the single.html file should overwrite the same in /themes/PaperMod/layout/_default/ ?
  4. the baseof.html file should overwrite the same in /themes/PaperMod/layout/_default/ ?
  5. the file extra.css shuould be in /themes/PaperMod/assets/css/?

Is it so?

12

Actually I am closing the Pull Request I sent you, as I just saw that the Papermod theme offers the copy code button functionality.

In a content file that will have a code block simply set:
ShowCodeCopyButtons: true

Read the themeā€™s documentation over here:

Also see the themeā€™s demo.

Do have a look at my Pull Request for educational purposes so that you see how one can override a themeā€™s templates.

1 Like
13

No donā€™t commit.

See my above reply.

No. When one needs to override a theme they duplicate the relevant templates and their directory tree directly under a projectā€™s root.

The same is true for extra assets that the theme does not provide.

Have a look at the Papermod themeā€™s features: Features | PaperMod

Basically if you hover over a code block you will see the copy button appear.
To enable it you need to set the front matter parameter I mentioned above.

1 Like
14

Thank you very much.
I understood.
Indeed, I had ShowCodeCopyButtons = false
I am sorry for this!
Now I set ShowCodeCopyButtons = true
Just the last question: that code ( ShowCodeCopyButtons = true ) works only for html code?
I see that it doesnā€™t work with markdown code (for example the code I used for ShowCodeCopyButtons = true).

15

Yes. It is for code blocks. See the sample content files provided in the Papermod themeā€™s example site.

1 Like
16

Thank you so much again.

17

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.