Skip to content

Conversation

rozsazoltan
Copy link
Contributor

@rozsazoltan rozsazoltan commented Jun 16, 2025

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.

Copy link

vercel bot commented Jun 16, 2025

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

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

@thecrypticace
Copy link
Contributor

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.

@thecrypticace thecrypticace merged commit 9953e6c into tailwindlabs:main Sep 2, 2025
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feat] : Add "Copy to Clipboard" button on code snippets in the documentation
3 participants