Trying to use alognside Prism.js but I'm getting text: undefined in the console

[tomasts248]

Oddly aside from this (which is triggered upon clicking in a pre tag element):

Ther's no error in the console.

I'm using:

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.10/dist/clipboard.min.js"></script>

<script type="text/javascript">

  var pres = document.querySelectorAll('pre');
      var clipboard = new ClipboardJS(pres);

      clipboard.on('success', function (e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
      });

      clipboard.on('error', function (e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
      });

</script>

[obetomuniz]

Hi @tomasts248, I was able to copy from multiple <pre> tags. Let me know if it helps.

var clipboard = new Clipboard(document.querySelectorAll('pre'));

clipboard.on('success', function (e) {
  console.info('Text:', e.text);
});

clipboard.on('error', function (e) {
  console.info('Text:', e.text);
});

and

<pre data-clipboard-text="321">321</pre>
<pre data-clipboard-text="123">123</pre>

Closing for now. Feel free to reopen if needed.

[tomasts248]

Hi @obetomuniz I'm afraid it is still not working, but maybe is because is a different sintaxis, which is this:

<pre class="line-numbers" `data-clipboard-text="321">`
<code class="language-css">/* this is css code */</code></pre>

Also I'm not sure about including a image on hover to copy the content of each pre tag. I'm looking for something like this:

[obetomuniz]

@tomasts248 By default, the library does not support such a thing. You'll need to combine the library with some programmatic approach. I believe you can use a similar approach that we're using in clipboardjs.com https://clipboardjs.com/assets/scripts/snippets.js or something like this https://jsfiddle.net/obetomuniz/6pc54de1/7