docs: Add copy buttons to all the codeblocks#8218
Conversation
This uses a bit of javascript to add copy buttons, so you can directly copy all the code in a given block to the clipboard! For codeblocks without prompts, it just copies all the code, for blocks with prompts, it copies all the lines after prompts, under the assumption that that's the code to be executed. It would give you *all* the lines, so the output wouldn't be interleaved like it is in the html, but good enough. The buttons appear on hover, so they aren't usable on phones, but since you won't really have a clipboard on phones and I have no idea how to make them not always in front of the text otherwise: Eh. I'm not in love with the javascript here, but it'll do.
|
I like it. I'm not sure if the smart "prompt elision" could cause any problems (by not being obvious?) or if it's just going to be a nice surprise the first time and then appreciated thereafter. Do we have |
Oh, it'll give you all the lines as one, so > echo one
one
> echo two
twogives you echo one
echo twoin the clipboard. That's what I meant by output not being interleaved. I'd do multiple buttons here, but the linebreaks aren't actually part of the |
|
I'm just worried that it's too smart. I'm fine if you want to merge it, but just want to say that KISS might apply here. (I feel like either KISS or go all the way with either per-prompt copy buttons like you mentioned or if you really want, maybe you can apply a background shading on hover that only applies to the content that would be copied at the same that the copy button becomes active - as an indication of what would be copied?) As a different matter altogether though, it occurs to me to question if people typically copy-and-paste examples to run directly as-is in the shell? What's the benefit if it's a deterministic process and the result is the same as they see in the browser? Ideally they'd be making changes to the command, which isn't too easy to do post-facto when copy-and-pasting into the shell where it's probably faster to just retype what you want than navigate to the various parts needing changes (until we get mouse support, given that people copying-and-pasting examples are probably not going to be hard-core vim/emacs users). |
It allows you to see for yourself, easily! And then, once you've seen that, you can alter it. Of course you could also be typing this stuff, but having a two click option makes it just that little bit quicker and easier that it makes it more tactile. Now, of course this isn't a massive thing, but it's a fun thing that's easily implemented. |
This uses a bit of javascript to add copy buttons, so you can directly
copy all the code in a given block to the clipboard!
For codeblocks without prompts, it just copies all the code, for
blocks with prompts, it copies all the lines after prompts, under the
assumption that that's the code to be executed.
It would give you all the lines, so the output wouldn't be
interleaved like it is in the html, but good enough.
The buttons appear on hover, so they aren't usable on phones, but
since you won't really have a clipboard on phones and I have no idea
how to make them not always in front of the text otherwise: Eh.
I'm not in love with the javascript here, but it'll do.
TODOs:
Screenshots
Firefox, dark theme
Chromium, light theme
