Copy to Clipboard

This page describes the copy to clipboard feature added to source blocks when using the default UI.

1. Source blocks

The default UI provides JavaScript that adds a clipboard button to all source blocks. The clipboard button shows up next to the language label when the mouse is hovered over the block. When the user clicks the clipboard button, the contents of the source block will be copied to the user’s clipboard.

You can try this behavior below:

puts 'Take me to your clipboard!'

Copy to clipboard only works for a local site or if the site is hosted over https (SSL). The copy to clipboard does not work on an insecure site (http) since the clipboard API is not available in that environment. In that case, the behavior gracefully degrades so the user will not see the clipboard button or an error.

2. Console blocks

The default UI also adds a clipboard button to all console blocks. A console block is either a literal paragraph that begins with a $ or a source block with the language console.

The script provided by the default UI will automatically strip the $ prompt at the beginning of each line and join the lines with &&. In Copy to clipboard for a multi-line console command, since the language is console and each line begins with a $, the console copy-paste logic is triggered.

Copy to clipboard for a multi-line console command

[,console]
----
$ mkdir example
$ cd example
----

When a user uses the copy-to-clipboard button, they will copy the combined command mkdir example && cd example instead of the literal text shown. This can be useful for tutorial examples that a user is expected to copy-paste to run. You can try this behavior below:

$ mkdir example
$ cd example