Add a button with link to code playground next to copy-code button

[matematiflo]

Description

Hi! I would like to add a second button to Quarto code blocks, next to the copy-code button. The goal is to have it link to a code playground that would load the code contained in the code block, for example Lean 4 Web.

Here is a picture of the feature as it exists on the Lean Zulip instance:

Would you have any pointers as to how I should go about this? Right now I would not even know where to star and what to study first 😅 Thanks for your attention!

[mcanouil]

The "easy part": create a Lua filter to modify code cells and to add the relevant HTML code (https://quarto.org/docs/extensions/).
The "hard part": figure out the right HTML to inject in right place into the DOM to not completely break other features such as code annotation and the copy-button.

[matematiflo]

Thanks! I’ll start with the Lua filter and see if I can manage something 👍

This looks promising:

https://github.com/shafayetShafee/code-fullscreen

Quarto Extension filter that adds a full screen button in the code blocks in RevealJs slides and html documents.

[mcanouil]

Indeed, and it seems to not conflict with the copy-button, worth checking with code-annotations.