Provide a copy code button for code snippets in markdown

[wwwillchen]

Similar to #224, but it would be nice to automatically have a clipboard button for me.markdown (which will automatically benefit me.code which uses markdown under the hood)

[richard-to]

Question. Do you want the copy button on the markdown block? Or do you only want it to appear for each code fenced block?

Initially was thinking just the markdown block since that's easiest, but reading the title, it occurred to me you could mean the latter.

[wwwillchen]

I think it's better to do it for each code-fenced block, since that's a big reason why people want to copy and paste. similar to what Gemini / GitHub does:

def foo():

text

def foo():

[richard-to]

Ok, yeah, that's what I was afraid of. I think it's doable.

Seems like we'll need to get the native html element, then grab all the pre tags and update the mark up to include the copy button. Then I guess under the hood we could try to extract all the code blocks and send them over to the frontend to use with the copy button.

Another option is to write a custom extension which make it easier to extract the code blocks (since we need to account for the various ways code blocks can be rendered) Then we can added some extra formatting for the copy button in the mark up. Then we'd still need to do some DOM manipulation on the native html to add the click handlers.

Third option, which is my preference is to move the markdown component to render on the frontend using markedjs and highlightjs. Then I think it will be easier to add our hook to add the copy button. This also has the benefit of improving the performance of the markdown component. The only hesitation about it is that I don't know if there's any downstream implications for using markedjs and highlightjs. Also don't know what issues you ran into initially with using markedjs.

[simonff]

+1, missing this feature