Make it possible to add copy to clipboard icon

[MarcSkovMadsen]

Context

I'm a contributor and user of HoloViz Panel. It uses markdown-it-py as the default renderer for markdown.

I would really like my code blocks to be easy to copy-paste. I would like a copy icon similar to what most data app and tech doc frameworks I know support.

I cannot see how this is possible with markdown-it-py. And I would really like it. So therefore I propose this feature request.

Proposal

A plugin to add a copy to clipboard icon to the rendered markdown.

For example like Github does

Or like Quarto does it

Additional Context

• Request for HoloViz Panel Make it easy to copy-paste from Markdown code blocks holoviz/panel#6209
• With HoloViz markdown based html is dynamically added to the application. And even streamed if the web app is a chat interface. So adding buttons on load of the document will not solve the problem.

Tasks and updates

No response

[welcome]

Thanks for opening your first issue here! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.

If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).

Welcome to the EBP community! 🎉

[chrisjsewell]

Heya, this would probably not be done at the parser level though?

For example, the documentation here (which is created using markdown-it-py for back-end parsing) has copy buttons https://markdown-it-py.readthedocs.io/en/latest/using.html:

But these are implemented as front-end javascript, added to the page by https://github.com/executablebooks/sphinx-copybutton/blob/1a2ee439dae08de21d429dd5b4abc587579c3cf4/sphinx_copybutton/_static/copybutton_funcs.js

With HoloViz markdown based html is dynamically added to the application. And even streamed if the web app is a chat interface. So adding buttons on load of the document will not solve the problem.

it might be then that you have to activate this Javascript to run in some, each time the page changes

[emcd]

I would expect this to be a plugin for the Python Markdown-It. It is more than just JS code, since a relatively-positioned HTML button must be generated as part of the output. For the JS Markdown-It, several people have created such plugins:

• https://github.com/ReAlign/markdown-it-copy
• https://github.com/DCsunset/markdown-it-code-copy

Unless you're aware of someone working on a Python implementation, I may create one soon, since I have need of it. (Another Holoviz Panel user.)