# Copy button to allow copying the content

**URL:** <https://discourse.gohugo.io/t/copy-button-to-allow-copying-the-content/36076>\
**Category:** support\
**Created:** [December 15, 2021, 11:05am UTC](https://discourse.gohugo.io/t/copy-button-to-allow-copying-the-content/36076 "2021-12-15T11:05:34Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![nicfab](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/nicfab/32/15818_2.png) [@nicfab](https://discourse.gohugo.io/u/nicfab)\
**Post date:** [December 15, 2021, 11:05am UTC](https://discourse.gohugo.io/t/copy-button-to-allow-copying-the-content/36076/1 "2021-12-15T11:05:34Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [December 15, 2021, 11:14am UTC](https://discourse.gohugo.io/t/copy-button-to-allow-copying-the-content/36076/2 "2021-12-15T11:14:31Z")

</div>

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/](https://www.dannyguo.com/blog/how-to-add-copy-to-clipboard-buttons-to-code-blocks-in-hugo/)

Also this forum topic:

> [@Add Copy to clipboard button to each highlight code with JavaScript](https://discourse.gohugo.io/t/add-copy-to-clipboard-button-to-each-highlight-code-with-javascript/21057):
>
> Hi, maybe you already know this but what I found after a lot of struggle is worth sharing with others. How to add ‘Copy to clipboard’ button into Hugo’s built-in code highlighter - pygment - just solved in a few lines of JS without any library. // copy to clipboard const d = document; const tempCopyInput = d.createElement('input'); d.body.appendChild(tempCopyInput); tempCopyInput.style.position = 'fixed'; tempCopyInput.style.top = '-1000px'; // copy to clipboard function const copyToCB = () …

---

<div class="post-metadata">

**Author:** ![nicfab](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/nicfab/32/15818_2.png) [@nicfab](https://discourse.gohugo.io/u/nicfab)\
**Post date:** [December 15, 2021, 11:35am UTC](https://discourse.gohugo.io/t/copy-button-to-allow-copying-the-content/36076/3 "2021-12-15T11:35:48Z")

</div>

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](https://www.dannyguo.com/blog/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 🙂

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [December 15, 2021, 12:05pm UTC](https://discourse.gohugo.io/t/copy-button-to-allow-copying-the-content/36076/4 "2021-12-15T12:05:52Z")

</div>

The source of the website I linked to above is [publc](https://github.com/dguo/dannyguo.com).

You need to use the following -modified as per your project’s structure-…

1. The source JS file is [here](https://github.com/dguo/dannyguo.com/blob/544b4741c64a3fb30b0725ed95cf7a5c1b6e3705/static/js/copy-code-button.js)

2. The [CSS rules](https://github.com/dguo/dannyguo.com/blob/544b4741c64a3fb30b0725ed95cf7a5c1b6e3705/static/css/post.css#L31-L63) for the button.

3. In the [`baseof.html`](https://github.com/dguo/dannyguo.com/blob/544b4741c64a3fb30b0725ed95cf7a5c1b6e3705/layouts/_default/baseof.html#L30) 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](https://github.com/dguo/dannyguo.com/blob/544b4741c64a3fb30b0725ed95cf7a5c1b6e3705/layouts/blog/single.html#L61-L65).

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

---

<div class="post-metadata">

**Author:** ![nicfab](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/nicfab/32/15818_2.png) [@nicfab](https://discourse.gohugo.io/u/nicfab)\
**Post date:** [December 15, 2021, 12:49pm UTC](https://discourse.gohugo.io/t/copy-button-to-allow-copying-the-content/36076/5 "2021-12-15T12:49:34Z")

</div>

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](https://github.com/adityatelange/hugo-PaperMod/tree/master/layouts/partials) there isn’t a file named **js.html**.  
What do you suggest?

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [December 15, 2021, 12:55pm UTC](https://discourse.gohugo.io/t/copy-button-to-allow-copying-the-content/36076/6 "2021-12-15T12:55:42Z")

</div>

Above I pointed you to include only [line 30](https://github.com/dguo/dannyguo.com/blob/544b4741c64a3fb30b0725ed95cf7a5c1b6e3705/layouts/_default/baseof.html#L30) of `baseof.html`.

[Line 29](https://github.com/dguo/dannyguo.com/blob/544b4741c64a3fb30b0725ed95cf7a5c1b6e3705/layouts/_default/baseof.html#L29) contains a ` {{ partial "js.html" . }}` .

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

---

<div class="post-metadata">

**Author:** ![nicfab](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/nicfab/32/15818_2.png) [@nicfab](https://discourse.gohugo.io/u/nicfab)\
**Post date:** [December 15, 2021, 1:03pm UTC](https://discourse.gohugo.io/t/copy-button-to-allow-copying-the-content/36076/7 "2021-12-15T13:03:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [December 15, 2021, 1:08pm UTC](https://discourse.gohugo.io/t/copy-button-to-allow-copying-the-content/36076/8 "2021-12-15T13:08:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nicfab](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/nicfab/32/15818_2.png) [@nicfab](https://discourse.gohugo.io/u/nicfab)\
**Post date:** [December 15, 2021, 1:27pm UTC](https://discourse.gohugo.io/t/copy-button-to-allow-copying-the-content/36076/9 "2021-12-15T13:27:48Z")

</div>

My repo is here [GitHub - nicfab/myhugo](https://github.com/nicfab/myhugo.git)  
Please, consider that I have already deleted those files.

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [December 15, 2021, 3:40pm UTC](https://discourse.gohugo.io/t/copy-button-to-allow-copying-the-content/36076/10 "2021-12-15T15:40:01Z")

</div>

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/`.

---

<div class="post-metadata">

**Author:** ![nicfab](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/nicfab/32/15818_2.png) [@nicfab](https://discourse.gohugo.io/u/nicfab)\
**Post date:** [December 15, 2021, 3:46pm UTC](https://discourse.gohugo.io/t/copy-button-to-allow-copying-the-content/36076/11 "2021-12-15T15:46:32Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [December 15, 2021, 3:48pm UTC](https://discourse.gohugo.io/t/copy-button-to-allow-copying-the-content/36076/12 "2021-12-15T15:48:00Z")

</div>

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:

> **[Variables | Front Matter](https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-variables/)**
>
> List of Front Matter variables used by PaperMod

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.

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [December 15, 2021, 3:51pm UTC](https://discourse.gohugo.io/t/copy-button-to-allow-copying-the-content/36076/13 "2021-12-15T15:51:39Z")

</div>

No don’t commit.

See my above reply.

> [@nicfab](#):
>
> - the `extra.css` file should be in `/themes/PaperMod/assets/css` ?
> - the `head.html` should overwrite the same in `/themes/PaperMod/layout/partials/` ?

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](https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-features/)

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.

---

<div class="post-metadata">

**Author:** ![nicfab](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/nicfab/32/15818_2.png) [@nicfab](https://discourse.gohugo.io/u/nicfab)\
**Post date:** [December 15, 2021, 4:01pm UTC](https://discourse.gohugo.io/t/copy-button-to-allow-copying-the-content/36076/14 "2021-12-15T16:01:19Z")

</div>

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** ).

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [December 15, 2021, 4:04pm UTC](https://discourse.gohugo.io/t/copy-button-to-allow-copying-the-content/36076/15 "2021-12-15T16:04:13Z")

</div>

> [@nicfab](#):
>
> ``  
> Just the last question: that code ( `ShowCodeCopyButtons = true` ) works only for html code?

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

---

<div class="post-metadata">

**Author:** ![nicfab](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/nicfab/32/15818_2.png) [@nicfab](https://discourse.gohugo.io/u/nicfab)\
**Post date:** [December 15, 2021, 4:08pm UTC](https://discourse.gohugo.io/t/copy-button-to-allow-copying-the-content/36076/16 "2021-12-15T16:08:45Z")

</div>

Thank you so much again.

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [December 17, 2021, 4:09pm UTC](https://discourse.gohugo.io/t/copy-button-to-allow-copying-the-content/36076/17 "2021-12-17T16:09:03Z")

</div>

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