tl;dr

You’re probably better off reading all of this page. The section on copy-to-clipboard-start, copy-to-clipboard-id is the most useful.

Partials and shortcodes

The Copy-to-clipboard functionality in the website uses the There are several ways to include a copy-to-clipboard clipboard.js javascript which is lightweight. As such there’s a bit of styling and icons added on top of that.

As there are a couple of different ways to use the copy-to-clipboard functionality there are a few different partials/shortcodes to have get to grips with.

command-block

The easiest to use is command-block. This is a styling, which automatically includes a copy-to-clipboard icon, for a block of code or commands that might be useful for a user to copy directly. The commands you want to appear in the block are .Inner text, so you use it like this:

{{<command-block>}}
cd ~
ls -ltr | tail -1
{{</command-block>}}

which gives the following

Copy to clipboard is automatically added and styled. You can turn off the copy-to-clipboard function with the attribute nocopy=true.

Note that you can use the chroma highlighting to add programming language syntax highlighting. The command-block CSS overrides a few properties from the normal chroma highlighting since it uses its own div styling (color. background-color, padding, margin). e.g.

{{<command-block lang="bash">}}
cd ~
ls -ltr | tail -1
{{</command-block>}}

which produces

cd ~
ls -ltr | tail -1

I didn’t say the bash highlighting in chroma is any good!

copy-to-clipboard-init

For some as-of-yet unfathomed reason the copy-to-clipboard-init.html partial doesn’t work when automatically included by head-meta.html like other *-init.html partials I’ve set up (this is generally just including the necessary CSS and JS scripts for the functionality, but only on pages that need it).

Instead, it is included at the top of any partial that starts a copy-to-clipboard section. Currently that is copy-to-clipboard-start.html and copy-to-clipboard-text.html. It should only run the first time, with a counter making it skip subsequent calls when a page is generated.

copy-to-clipboard-text

This is the next easiest to use, although might end up copying different text to that which is displayed/highlighted if you’re not careful! It only displays the copy-to-clipboard icon, with some (not-displayed) text to put on the clipboard when the icon is clicked. As such it does not link up with any other specifically displayed text.

{{<copy-to-clipboard-text>}}Text to put on the clipboard{{</copy-to-clipboard-text>}}

makes this right justified icon —>

copy-to-clipboard-start, copy-to-clipboard-id

These two partials can be used together to

1. Mark an area of text to be copied, and
2. Add an id attribute to an element in this area that will be the highlighted and copied text.

Because the second part requires adding an attribute into the HTML these are really best used in other partials or templates where you are closer to the HTML, but you can use the shortcodes to some extend in markdown, like this:

{{<copy-to-clipboard-start>}}Copy this text!!!{{</copy-to-clipboard-start>}}
Hold... hold... hold... <span id={{<copy-to-clipboard-id idonly=true >}}>Copy this text!!!</span>

which renders as:

Hold… hold… hold… Copy this text!!!

If you don’t put any .Inner text in the copy-to-clipboard-start block then the tooltip over the copy icon just says “Copy text”.