Make it easy to copy-paste from Markdown code blocks

[MarcSkovMadsen]

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 button

Additional 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

[MarcSkovMadsen]

Solved by #7451