Copy highlighted code to the clipboard

Allowing users to copy sample code is a common thing in the web development nowadays. To demonstrate the implementation, we create two elements:

<pre id="sampleCode"><code>...</code></pre>
<button id="copyButton">Copy</button>

The sampleCode element contains the sample code which is already highlighted.

Copying the sample code to the clipboard could consist of three steps:

• Select the text content of the code element
• Copy it to the clipboard using the document.execCommand('copy') function
• Last but not least, both the steps above have an effect on the text selection.

So we have to backup the current selected text before copying, and restore it at the end.

You can see the code in the demo below. Enjoy!

Demo

See also

• Attach or detach an event handler
• Copy text to the clipboard
• Get the selected text
• Paste as plain text
• Save and restore the text selection
• Select the text content of an element