Skip to content

Added copy button #2279

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

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 Git ↗︎

Name Status Preview Comments Updated (UTC)
tailwindcss-com ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 16, 2025 8:55am

const result: string[] = [];
let skip = 0;

const commentRegex = /\/\*.*?\*\/|\/\/.*|<!--.*?-->|#.*/g;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm trying to filter out comments found in all kinds of languages as briefly as possible. Since this is client-side code that runs only occasionally, I believe it's fine to handle it with regex.

let skip = 0;

const commentRegex = /\/\*.*?\*\/|\/\/.*|<!--.*?-->|#.*/g;
const codeTagRegex = /\[!code\s+([^\]]+)\]/;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also used regex to detect Shiki comments.

let removed = false;

// process comments to detect [!code ...] directives
for (const c of comments) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We check every comment. If there is a Shiki match:

  • we handle the -- case specially in diffs (the skip handling is necessary for this reason)
  • otherwise, we just remove the comment from the line


// add line if not removed and line is not empty or has no comments
if (!removed && (comments.length === 0 || line.trim() !== "")) {
result.push(line);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After that, we add to the result those lines that don't need to be removed (special case) and either had no comments or had comments that were removed, leaving the line empty.

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
1 participant