0

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?

Improve this question

1 Answer 1

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.

Improve this answer
3
  • I'm not so sure. This programming language uses characters like " and ' which conflict with the enclosing "" of the attribute, and also I'm not sure that attributes preserve line breaks and indentation, although I've never tried it.
    – C. E.
    Commented Feb 14, 2019 at 6:56
  • It also has the option to set the data source to be the content of another element. That way, you could add a hidden <pre> element with the content you wanted and the id "foo" and select it with data-clipboard-target="#foo".
    – Paul Elrich
    Commented Feb 14, 2019 at 19:54
  • A pre tag might be an option not just with that JavaScript package but with my current JavaScript as well... I can just turn it into a textarea before copying. I will have to try it out.
    – C. E.
    Commented Feb 14, 2019 at 20:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.