formatting - Images that copy code to clipboard when you click on them

I run a website about a programming language which is very well-integrated with a front-end which adds a lot of styling to the code that cannot be replicated in the browser. For that reason, I publish my tutorials by having blocks of text interspersed with images of code. Clicking on the images copies the code to the clipboard so that people can use them in their own front-end. Here is what the HTML code for this looks like:

<img src="..." />
<textarea>code goes here</textarea>

The textarea element is hidden using CSS. This used to work because I had disabled wpautop but now that I upgraded to Gutenberg, this doesn't seem to be an option anymore. Now it inserts <br /> tags in my content.

What is a long-term, proper solution to this problem? Can blocks help me?

I run a website about a programming language which is very well-integrated with a front-end which adds a lot of styling to the code that cannot be replicated in the browser. For that reason, I publish my tutorials by having blocks of text interspersed with images of code. Clicking on the images copies the code to the clipboard so that people can use them in their own front-end. Here is what the HTML code for this looks like:

<img src="..." />
<textarea>code goes here</textarea>

The textarea element is hidden using CSS. This used to work because I had disabled wpautop but now that I upgraded to Gutenberg, this doesn't seem to be an option anymore. Now it inserts <br /> tags in my content.

What is a long-term, proper solution to this problem? Can blocks help me?

• formatting
• wp-autop

Share Improve this question edited Feb 13, 2019 at 19:57 C. E. asked Feb 13, 2019 at 18:14 C. E.C. E. 10122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I think that clipboard.js is your best bet to what you're looking for.

Install that script, then just change your img to

<img src="..." data-clipboard-text="..."> And you should be good to go.