Added copy button

[rozsazoltan]

Closes #2271

I know there are already a few active PRs (#2222, #2278), but each of them got stuck at some point for various reasons and tries to filter out Shiki comments using different logic.

Since there are multiple PRs, I'm not sure which one I should prioritize. I like the icons in the first PR, but I would also animate them using CSS. I think the second PR mainly tries to outperform the first one - unsuccessfully - and gets stuck with CSS examples or handling diffs.

There are several issues to address:

• we need to be compatible with different comment syntaxes across various languages
• shiki comments can appear not only on new lines but also inline
• in the case of inline comments, we don’t want to remove the entire line
• for diff code, deleted lines aren't needed - after all, that's the point of diff examples
• it needs to handle the removal of all Shiki comments in a general way, without listing every possible Shiki comment syntax explicitly

For my part, I'm currently using the code shared in this PR - it seems to be working so far:

• the copy button appears even without a code example header
• it handles diffs correctly (example postcss.config.mjs)
• it processes highlight, word, and other expressions properly
• it works with any kind of code example (bash, css, html, js, ...)
• it also preserves empty lines and does not remove them (example vite.config.ts)

I'm not convinced that this is the best solution to the problem - that's why I hesitated to share it earlier.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
tailwindcss-com	Ready	Preview	Comment	Aug 27, 2025 2:10pm

[thecrypticace]

little update: We're gonna design a custom icon for the copy button and maybe switch to a "copied" tooltip kinda like we had in the v3 docs but not 100% sure yet. Likely will get things updated and merged sometime next week.