Using clipboard.js

[Vincent Voyer]

Hi, I am using middleman 4, kramdown and middleman-syntax latest.

I am looking for a way to use https://clipboardjs.com/ in my middleman pages. But this requires that
the non-highlighted code syntax is present somewhere.

While when using middleman-syntax

In my documentation.md I have:

Some code example:

```js
  code code code
```

Which is then turned to:

<p>Some code example:</p>

<div class="...">
  <span>code</span> <span class="..">code</span> <!-- etc... -->
</div>

So I cannot bind clipboard.js to the code example because the content is split for good, for syntax highlighting.

I would like to use the clipboard.js system to provide copy/paste on the code sample.

I am very new to middleman/ruby and I am sure this is not exactly the right place to ask this. But do you have some pointers for me?

Thanks.

[Eliott Appleford]

With jQuery you could just do $(selector).text() which removes HTML tags.

[Eliott Appleford]

Else, you'd need to patch the highlighter method, which returns highlighted HTML from the code argument.
You could simply append the original code as another HTML tag for copying, which would be hidden e.g. <code hidden>#{code}</code>.

[Vincent Voyer]

Do you have an example on how to monkey patch the highlighter method (and where to put it?)

[Vincent Voyer]

With jQuery you could just do $(selector).text() which removes HTML tags.

I thougt so but I would then miss all indentation and linebreaks right?

[Vincent Voyer]

Hey actually this works really well, silly me!

document.querySelector('.code').innerText

Will get back the indented code raw. Thanks a lot!