CODEWITHSUNDEEP
javascriptvue.jsclipboard.jsprismjs
shashi verma
shashi verma

Reputation: 973

How to add copy to clipboard functionality in vuejs with prismjs?

I am displaying Html syntax using vue-prism-component (https://www.npmjs.com/package/vue-prism-component). Now I want to add a button that should copy the code. So far, I have found a library vue-clipboard2 (https://www.npmjs.com/package/vue-clipboard2) in this they are getting text from an input tag. How I would select the syntax of Html generated by vue-prism-component on a click of button.

Upvotes: 1

Views: 3739

Answers (1)

Asim Khan
Asim Khan

Reputation: 2039

Prism has some documentation for implementing such feature

https://prismjs.com/plugins/copy-to-clipboard/

Here is the example code for copying code from vue-prism-component

[Codepen] https://codepen.io/wilbo/pen/xRVLOj

You need to add this dependency of clipboard https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js

another codepen example which is not in vue but just to get idea

[Codepen] https://codepen.io/drhodes/pen/NAOgpG

Upvotes: 3

Related Questions