Feature Request: Copy to clipboard buttons on code blocks about theodinproject HOT 10 CLOSED

I would be willing to take this on. Playing around with it its relatively easy to hide the button using CSS for anything that isn't bash using a class selector and display:none:

pre.highlight:not(.language-bash) + .toolbar {
  display: none;
}

The one annoying thing with that is that we are still running the code in all cases, just hiding the output of it

from theodinproject.

Thanks for the suggestion @damon314159, I agree it makes a lot of sense having the snippets on installations copyable.

I remember this coming up before, either on Discord or on Github, and we were reluctant to add it to every lesson.

IIRC adding a copy button would make it easier to copy and paste, and we wanted to encourage leaners to type out the code snippets in the programming lessons. Theres value in typing it out, making mistakes and debugging them. It builds a lot of muscle memory and gives learners a better feel of how the code works.

But... that might be old school kind of thinking. I'd appreciate some thoughts on this. I'm happy to go with whatever the consensus is.

In short: it would be easier to add the clipboard button site wide for every lesson. But if that isn't something we want, we'll need to figure out a way to enable it for specific (installation) lessons - still very doable.

from theodinproject.

Maybe we could implement for codeblocks set to the bash language only? This way we'd be targeting the stuff mostly used for install commands and not actual code snippets.

from theodinproject.

I think there is still added value in typing even bash commands, as it forces you to think about the structure of a command.

from theodinproject.

I think if a person intends to copy it, they're going to select and copy it regardless. This would only be a QoL change in that regard.

I can see the argument for only applying it to bash - that makes sense to me.

Perhaps a note box when the idea of coding along is introduced that typing code yourself builds memory

from theodinproject.

Targeting bash only blocks is a great idea to get this started.

I've been doing a little research to hopefully help whoever picks this up. Prism have a copy-to-clipboard plugin we can use: https://prismjs.com/plugins/copy-to-clipboard/

We include new Prism plugins in our .babelrc file, we'll need something like this:

"plugins": ["line-numbers", "toolbar", "copy-to-clipboard"]

After that, the rest should hopefully be manageable with CSS 🤞

from theodinproject.

Thanks @Asartea, I've assigned to you.

from theodinproject.

Okay stupid question: how do I get CSS changes to show up? I inserted the above line into prism-theme.css, but running the app locally doesn't actually seem to reflect that change. I tried restarting foreman, as well as clobbering the CSS (via rails css:clobber)

from theodinproject.

That should have done it. But try running rails assets:clobber, I think its a bit more thorough.

from theodinproject.

Ah that did it

from theodinproject.