Make it easy to copy-paste from Markdown code blocks #6209
Description
It would really, really be valuable if Panel code markdown blocks supported copy-paste. All competing frameworks support this.
A small example.
import panel as pn
pn.extension()
pn.Column("""
An example
```python
import panel as pn
pn.extension()
```
```bash
https://panel.holoviz.org
```
""").servable()
I would like something similar to what Quarto provides (below). Its only shown when the upper, right corner is hovered upon.
We also have the copy-paste functionality in our docs. It could also be similar to that. I'm just not a fan of the green check mark that shows when the code has been copied as the green does not go well with the colors used in my (work) apps.
Workaround
Make a separate copy button. Its not as nice a UX though.
import panel as pn
DEFAULT_KWARGS = {
"button_type": "default",
"description": "Copy to the clipboard",
"icon": "clipboard",
"sizing_mode": "fixed",
"width": 30,
"margin": 0,
}
def create_copy_to_clipboard_button(text, **kwargs):
for key, value in DEFAULT_KWARGS.items():
if not key in kwargs:
kwargs[key] = value
button = pn.widgets.Button(**kwargs)
copy_code = f"navigator.clipboard.writeText(`{text}`);"
button.js_on_click(code=copy_code)
return buttonAdditional Context
- Blog Post showing how to add Github like copy button: https://junges.dev/2-how-to-add-github-copy-to-clipboard-button-on-your-docsblog