Understanding st.code magic

st.code is said to be just a wrapper for st.markdown. Looking at st.code code it is not clear how the “copy to clipboard” icon appears in the box that wraps around the body provided to st.code. How can I decode that?

If that can be understood, one could replace that symbol more visibly by something like “Copy Me”. I have been trying to do something like that with st.button and various suggested libraries. I can do it locally, but it hasn’t worked on deployed apps. I did follow the answers elsewhere and populated requirements.txt and packages.txt with all kinds of things, but to no avail.

Hi @AshishMahabal -

Not having looked at the source code, the copy-to-clipboard icon is almost certainly a function of the underlying JavaScript markdown library we’re using. What are you trying to solve for here?


@randyzwitch Thank you for the reply.

If it is JavaScript markdown, that may not help here.

What I was trying to do is to implement a copy-to-clipboard button. Despite using various suggested combinations of pyperclip, clipboard, xerox python libraries in requirements.txt along with xsel etc. in packages.txt, I kept on getting “no copy/paste mechanism” when deploying (it worked fine locally). I know that others have had success with this, but I haven’t seen something like “do exactly this”. And these always used external libraries.

Since st.code does it so trivially, but always showing the copy symbol after one hovers, I was wondering if one could copy whatever part of the st.code (or the code that it depends on) is responsible for that to ones own program and modify to get the needed functionality …


Just want to throw in that we have copying to/from clipboard on our roadmap! Don’t think it will come anytime very soon though…