This theme component adds a copy button to codeblocks inside of Discourse posts – perfect for communities sharing code samples or knowledge base articles that require copying text.
On desktop, the copy button shows up on hover over the block.
On mobile, the code button is shown always but pushes the code in the block down to avoid obfuscating the first line of code if too long.
Do note that this only works for codeblocks generated by ``` ```, and not inline codeblocks.
This is a codeblock.
Copy this text.
This is an inline codeblock. Copy does not work here.
Big thanks to @joffreyjaffeux who did a major chunk of the initial development on this one.
Curious if we are open to replacing the localized “copy”/“copied” text with icons? Maybe the copy icon for “copy”, and the checkmark icon for “copied”?
I’m open to adding a setting to the component. The reason I decided to go with localized text is it is clear what is happening, plus text can have a shorter height and still be readable. The aesthetic of it seemed to fit the use case better.
Also fixed a couple of bugs with older versions of Discourse that don’t have @ember/runloop and Promise from the rsvp library available. (Thanks to @jomaxro for the reports on those)
I like this a lot! But can the copy button be a visible-on-tap-only thing for mobile? I’m a little bummed by the consistent loss of screen space on mobile, an extra line for each code block:
since it’s opt-in you’d only enable it on sites where actually copying code blocks is a common activity as well
… that being said… the odds of any given code block being copied on mobile are vanishingly small, so I feel the ratio of UI to usage is off here, and would prefer an on-tap thing for mobile?
I would love to use this but as soon as I enabled it for my Grey Amber theme, my site became sluggish and unresponsive at times until I turn it off.
Has anyone experience this behavior, or could it tax the VPS that much when this is enabled?
The site is like 99.9% single code lines and I was hoping to switch into code blocks for this, so is not like is trying to fetch to convert any existing code. Or is it?
Do I have to give it some amount of time to normalize? It just kept bringing the site down temporarily and when sometimes a page would load it would say error and the try again message from discourse would show up.
Concerning, the possible perf bug, I tried a page with dozens of code blocks and got 0 issue, so I will need a reproduction before I can do anything @lcestou please
Try the new codeblock here:
rsync -a file.txt file_backup.txt
rsync -a /var/www/public_html/ /var/www/public_html_backup/