Copy Button plugin unstyled + i18n

[calmonr]

This library is unstyled. This means it does not provide a CSS file that applies styling by default. Rather, it provides logical attributes that you use to apply the styling yourself.¹

The library follows this pattern of being unstyled, so I'm wondering: why does the copy button have hard-coded styles? If the developer wants to change the style, he/she would need to use !important for different properties.

I propose that we change this and give the user in the documentation a base style that he/she can do anything with. This would avoid problems like this:

• Copy Button css position is not working well. #240 (fix(docs): copy button position in the code block #241)

---

I think it would be nice to allow users to set the title and aria-label as well instead of hard-coded English, just like remark-rehype does for GFM footnotes².

---

I was looking into the copy button transformer code and I have two possible suggestions:

• Perhaps we can insert a script element instead of creating the same onclick event for every code element. That suggestion is the least problematic as the code is simple, but could be an improvement. That change would assume that the user is not doing some (unusual?) composition of files (multiple MD/Xs files to generate one HTML) as the transformer runs for each file and would insert the script for each one indivudally.
• Right now the content of the code element is being put inside an attribute data and that means we are duplicating everything. If we have a page with multiple code elements and they have a considerable amount of code it would make the generated HTML bigger. What about using either closest/querySelector to get the code content or a custom attribute to identify the code block (to avoid DOM traversal)? That way the HTML will be smaller. Not to mention that the raw content is there as well, so if you have // [!code --] beucase you are using the transformerNotationDiff from the @shikijs/transformers the user will copy that as well and might be confusing.

---

What do you think about that?

Thank you.

Footnotes

1. https://rehype-pretty.pages.dev/#styles ↩

2. https://github.com/remarkjs/remark-rehype?tab=readme-ov-file#example-footnotes-in-languages-other-than-english ↩