Hugo + js = copy heading links
Example on how to add copy-link buttons to headings for the convince of the user. While this is not the most important feature it is easy enough to implement so why not add it.
The (fairly lightweight) clipboardjs library is used to copy the code to clipboard. At the time of writing
For the tooltips the tooltips CSS library is used.
This article was written for Hugo
Hugo automatically generates the headings, so nothing else has to be done. The script will automatically wire the copy-link buttons and we’re done.
Here are some headers. Hoover over them to reveal the copy button.
Another level deeper
The end (this is a heading)
The overwritten Hugo’s markdown heading template, located at
/layout/_default/_markup/render-heading.html. Because this template is used for the whole site and we only want heading links on single pages adding the copy-link button is conditional.
The accompanying SCSS.
Don’t forget to include clipboardjs and tooltips CSS.