# Copy Codeblocks Theme Component
**URL:** https://meta.discourse.org/t/copy-codeblocks-theme-component/147441
**Category:** Theme component
**Tags:** deprecated
**Created:** [April 9, 2020, 5:32pm UTC](https://meta.discourse.org/t/copy-codeblocks-theme-component/147441 "2020-04-09T17:32:04Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@justin](https://meta.discourse.org/u/justin)
#### Post date: [April 9, 2020, 5:32pm UTC](https://meta.discourse.org/t/copy-codeblocks-theme-component/147441/1 "2020-04-09T17:32:04Z")
> ⚠ This theme component is now **deprecated** in favor of [Copy codeblock contents to clipboard](https://meta.discourse.org/t/copy-codeblock-contents-to-clipboard/148855), a core Discourse feature.
🌞 [Preview on Theme Creator](https://theme-creator.discourse.org/theme/justindirose/copy-codeblocks)
💻 [Git Repository](https://github.com/discourse/discourse-copy-codeblocks): `https://github.com/discourse/discourse-copy-codeblocks`
💡 [How do I install a Theme or Theme Component?](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)
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.
```plaintext
This is a codeblock.
Copy this text.
```
This is an `inline codeblock`. Copy does not work here.
Big thanks to @j.jaffeux who did a major chunk of the initial development on this one.
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [April 9, 2020, 5:39pm UTC](https://meta.discourse.org/t/copy-codeblocks-theme-component/147441/2 "2020-04-09T17:39:17Z")
What is the difference between this and [https://meta.discourse.org/t/copy-option-for-code-blocks-in-discourse/60961?u=falco](https://meta.discourse.org/t/copy-option-for-code-blocks-in-discourse/60961) ?
---
### Author:  [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [April 9, 2020, 5:45pm UTC](https://meta.discourse.org/t/copy-codeblocks-theme-component/147441/4 "2020-04-09T17:45:30Z")
Multiple things:
- doesn’t vendor a full clipboard lib
- doesn’t rely on jQuery
- doesn’t leak event listeners
- doesn’t rely on multiple events
- uses up to date coding standards
- doesn’t have the quoting bug
- …
Not sure if this is working correctly on mobile too.
---
### Author:  [@xrav3nz](https://meta.discourse.org/u/xrav3nz)
#### Post date: [April 9, 2020, 6:20pm UTC](https://meta.discourse.org/t/copy-codeblocks-theme-component/147441/5 "2020-04-09T18:20:13Z")
Awesome!!
Curious if we are open to replacing the localized “copy”/“copied” text with icons? Maybe the [copy icon](https://fontawesome.com/icons/copy?style=solid) for “copy”, and the [checkmark icon](https://fontawesome.com/icons/check?style=solid) for “copied”?
---
### Author:  [@justin](https://meta.discourse.org/u/justin)
#### Post date: [April 9, 2020, 6:27pm UTC](https://meta.discourse.org/t/copy-codeblocks-theme-component/147441/6 "2020-04-09T18:27:07Z")
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.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [April 9, 2020, 10:25pm UTC](https://meta.discourse.org/t/copy-codeblocks-theme-component/147441/7 "2020-04-09T22:25:58Z")
> [@j.jaffeux](#):
>
> Multiple things:
It sounds like we should remove / deprecate one or the other and consolidate effort? 🤔
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [April 9, 2020, 11:12pm UTC](https://meta.discourse.org/t/copy-codeblocks-theme-component/147441/8 "2020-04-09T23:12:30Z")
Minor, the copied delay is too fast on my iPhone, text should say copied for around 3 seconds prior to flipping back
It does look good 👍
---
### Author:  [@justin](https://meta.discourse.org/u/justin)
#### Post date: [April 10, 2020, 2:28pm UTC](https://meta.discourse.org/t/copy-codeblocks-theme-component/147441/10 "2020-04-10T14:28:40Z")
Modified here:
[https://github.com/discourse/discourse-copy-codeblocks/commit/d1af36a4a5197dab4ca1dd62a05930088882de45](https://github.com/discourse/discourse-copy-codeblocks/commit/d1af36a4a5197dab4ca1dd62a05930088882de45)
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)
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [April 10, 2020, 4:05pm UTC](https://meta.discourse.org/t/copy-codeblocks-theme-component/147441/11 "2020-04-10T16:05:05Z")
Sorry, but a ❤ isn’t enough this time.
Sweet! This is awesome. This combined with the [Placeholder Forms](https://meta.discourse.org/t/discourse-placeholder-theme-component/113533) is really cool.
### what I just did with it
> **[Replacing A Failed Hard Drive In A Software RAID1 Array](https://www.howtoforge.com/replacing_hard_disks_in_a_raid1_array)**
>
> This guide shows how to remove a failed hard drive from a Linux RAID1 array (software RAID), and how to add a new hard disk to the RAID1 array without...
```plaintext
sfdisk -d /dev/=gooddev= | sfdisk /dev/=newdev=
mdadm --manage /dev/md1 --add /dev/=newdev=
mdadm --detail /dev/md1
```
### Watch it work!
```plaintext
while true; do mdadm --detail /dev/md1|grep "Rebuild Status" ; sleep 10;done
```
### Get Power On time for all drives
```
for x in a b c d ; do smartctl -a /dev/sd$x|grep Power_On; done
```
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [April 10, 2020, 6:39pm UTC](https://meta.discourse.org/t/copy-codeblocks-theme-component/147441/12 "2020-04-10T18:39:41Z")
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:
But then again I realize
- code blocks aren’t _that_ common
- 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?
Not urgent.
---
### Author:  [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [April 10, 2020, 6:41pm UTC](https://meta.discourse.org/t/copy-codeblocks-theme-component/147441/13 "2020-04-10T18:41:08Z")
Yes totally fair request 👍 I share this concern too, we will find a solution.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [April 10, 2020, 6:45pm UTC](https://meta.discourse.org/t/copy-codeblocks-theme-component/147441/14 "2020-04-10T18:45:01Z")
Even this would be preferable on mobile, I think. Alignment is off but you get the concept:
(Even if it overlaps text, etc, not sure if that makes it harder or easier than on-tap display? 🤔)
---
### Author:  [@justin](https://meta.discourse.org/u/justin)
#### Post date: [April 10, 2020, 6:47pm UTC](https://meta.discourse.org/t/copy-codeblocks-theme-component/147441/15 "2020-04-10T18:47:07Z")
We had that originally but it overlapped text without being able to see it. I like the idea of it becoming visible on tap. Will look into that.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [April 10, 2020, 6:47pm UTC](https://meta.discourse.org/t/copy-codeblocks-theme-component/147441/16 "2020-04-10T18:47:44Z")
> [@justin](#):
>
> it overlapped text without being able to see it
On mobile that is a better tradeoff, big time. On laptop/desktop/tablet, the additional space being consumed is 100% fine.
---
### Author:  [@lcestou](https://meta.discourse.org/u/lcestou)
#### Post date: [April 10, 2020, 10:56pm UTC](https://meta.discourse.org/t/copy-codeblocks-theme-component/147441/17 "2020-04-10T22:56:36Z")
Hello,
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.
Thanks in advance.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [April 10, 2020, 11:55pm UTC](https://meta.discourse.org/t/copy-codeblocks-theme-component/147441/18 "2020-04-10T23:55:20Z")
Oh wow that sounds like a serious bug actually!
---
### Author:  [@riking](https://meta.discourse.org/u/riking)
#### Post date: [April 11, 2020, 12:08am UTC](https://meta.discourse.org/t/copy-codeblocks-theme-component/147441/19 "2020-04-11T00:08:21Z")
Minor Bug: the “copy” text can show up in a quote. (Much more minor than the previous post.)
> [@pfaffman](#):
>
> copy
>
> ```plaintext
> while true; do mdadm --detail /dev/md1|grep "Rebuild Status" ; sleep 10;done
>
> ```
>
> ### Get Power On time for all drives
>
> copy
>
> ```plaintext
> for x in a b c d ; do smartctl -a /dev/sd$x|grep Power_On; done
>
> ```
The `button.copy-cmd` needs to be excluded from the quote. Applying `user-select: none` in the CSS fixes Ctrl-C but not the quote functionality.
---
### Author:  [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [April 11, 2020, 5:58am UTC](https://meta.discourse.org/t/copy-codeblocks-theme-component/147441/20 "2020-04-11T05:58:55Z")
Do you have a link to your site? It seems very weird than a theme could cause this. How many codeblocks do you have on a page?
---
### Author:  [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [April 11, 2020, 7:34am UTC](https://meta.discourse.org/t/copy-codeblocks-theme-component/147441/21 "2020-04-11T07:34:41Z")
So I made multiple changes here. Given our problems were:
- screen space on mobile
- copy text bug on quote
- and we have had request of having an icon instead of text
The obvious solution solving all of this… was to use an icon.
On mobile it’s now acceptable to have it on the right, given it takes less space and we can just have some padding for text:
Only minor annoyance, on long FIRST lines it will be hidden behind button, I think it’s acceptable given you can scroll:
And in Desktop it will work as before without the quoting bug:
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:
```plaintext
rsync -a file.txt file_backup.txt
rsync -a /var/www/public_html/ /var/www/public_html_backup/
```
---
### Author:  [@justin](https://meta.discourse.org/u/justin)
#### Post date: [April 22, 2020, 2:09pm UTC](https://meta.discourse.org/t/copy-codeblocks-theme-component/147441/22 "2020-04-22T14:09:00Z")
This feature is now in core Discourse 🎉
As a result, this theme component is now **DEPRECATED**. It will still work for older Discourse instances but will no longer receive any updates.
I’ve updated the OP to reflect this information.
[Next page](https://meta.discourse.org/t/copy-codeblocks-theme-component/147441.md?page=2)