Copy to clipboard for lstlisting

[evoludolab]

When translating code listings to html, LaTeXML conveniently creates download links for code snippets. It would be even more user-friendly if this could be changed to a copy-to-clipboard-button.

I started playing around with LaTeXML-block-xhtml.xsl and made some progress but it's far from satisfactory... too big a hack to warrant a PR. More specifically, I started by replacing line 153 in LaTeXML-block-xhtml.xsl with

<xsl:element name="button" namespace="{$html_ns}">
    <xsl:attribute name="onclick">toClipboard(this.parentNode.parentNode)</xsl:attribute>
    <xsl:text>📋</xsl:text>
</xsl:element>

However, I would be happy to continue giving this a try if you were willing to give me some directions. More specifically, the issues I ran into were:

• is this the right approach to begin with?
• the clipboard icon is ugly and doesn't scale. An icon like GitHub uses above would be way nicer. Create copy icon and where to place it?
• the custom javascript code for toClipboard (or similarly named) method needs to live somewhere. Create javascript code for copying and where to place it?
• the argument this.parentNode.parentNode to toClipboard works but is ugly and so I expect that I am missing something...
• make this configurable?

Any help and pointers are much appreciated!

[dginev]

I certainly prefer copying listings to clipboard on the web, so I like your suggestion.

The difference to keep in mind is that the current download solution works in browsers with JS disabled.

---

Maybe a better direction would be to add a new JS asset (instead of modifying the XSLT) which uses the available data source and instead of download switches the onclick behavior to a clipboard copy?

For customization, if we wanted to support multiple variants in the XSLT we would need to introduce a parameter and use it with --xsltparameter=name:value. Btw, If you are making major modifications to one of the stylesheets you probably want to copy it under a new name and load it as an alternative. You could even substitute the entire XSLT pipeline by specifying --stylesheet=name.

To add a new conditional JS asset to the final output, we have --javascript=name

[evoludolab]

Thanks for the suggestions. This makes a lot of sense. However, the scale and complexity of the LaTeXML project is intimidating...

For now, I went the easy way and just replaced the relevant HTML code with a button element by some custom post-processing of the LaTeXML output with sed that is happening anyways. I'm quite happy with the result. If you are curious you may check it out at https://www.evoludo.org/docs/html/Ch13.html. The button even provides visual feedback that the listing content has been copied 😁

I guess, I could basically do the same thing that sed does now with a custom javascript and simply replace the download elements with the button in the DOM after the page has loaded. This feels much more doable for a perl illiterate like myself 😉

I will leave this enhancement request open since it would be a great feature for LaTeXML and hopefully at some point get back to it with a pull request.

[dginev]

@evoludolab your button looks nice!

I know latexml can be intimidating, but I can also entice you that if you carry the effort to a clipboard copy contributed to the project, I can make it available for all listings in arXiv.