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:
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
- 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!