COPY option for code blocks in Discourse


#1

We have a top secret project we’ve been working on in-house that would really benefit from a COPY TO CLIPBOARD feature for Discourse code blocks.

Others have encountered the problem too:

With a little bit of work we appear to have a great little working model (applied to the labs forum right here) that can be easily applied to other Discourse forums as follows:

  • Go to “Admin” setting page and then select “Customize” in the top nav
  • Click on the “Import” button, then Select “From the web” in the pop up dialog
  • Copy and paste the following URL into the text field and then click the “Import” button in the pop up dialog
https://github.com/Daemonite/discourse-clipboard

1

Enable the newly installed theme or append it to another theme as a child component and you will be able to see a “Copy” button attached to every code block in your Discourse.

For example:

Copy text from a code block

Discourse uses ember.js for internal navigation, so the DOM will only be ready once. This plugin ties up the clipboard function with ember.js via Discourse APIs, so the code runs when the content of a post is cooked instead of on DOM ready.


#2

just a small note if you noticed already then my bad.
The copy button seem to be on top of the scroll bar. I can’t click the up arrow without copying :slight_smile:
edit: I just tried again and I can very narrowly click the up arrow.
https://meta-s3-cdn.global.ssl.fastly.net/original/3X/f/9/f9fd43fa425c9748ab5b8c5faaf0ebb6731ccaed.png

h/t https://meta.discourse.org/t/add-button-to-select-all-text-in-a-preformatted-block/30878/11


#3

#4