[added a copy button] #2222
[added a copy button] #2222
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
It doesn't work perfectly for me, the code keeps the highlights as comments. I think for any copy-paste, such comments shouldn't be kept. import { defineConfig } from 'vite'
// [!code highlight:2]
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
// [!code highlight:2]
tailwindcss(),
],
}) |
|
Thanks for addressing the code highlighting issue. I've verified that the bug has been fixed. The copy functionality now correctly strips out highlight directives before copying code snippets to the clipboard, ensuring users receive clean, ready-to-use code without unnecessary comments. |
|
@philipp-spiess Hi there! Just checking in on this PR one more time - I've resolved the issue you mentioned and pushed the fix in my most recent commit. Would greatly appreciate it if you could take another glance when you have the opportunity. This feature should simplify things significantly for users once it's live! If anything else needs adjusted, let me know. |
| function cleanCodeForCopy(code:string) { | ||
| return code | ||
| .split('\n') | ||
| .filter(line => !line.includes('[!code highlight')) |
There was a problem hiding this comment.
Hey! Sorry I haven't had time to properly review this yet but this line does not look like it's generic enough to handle all the code highlighter annotations. Some of them appear inline (so at the end of a line containing code).
This also doesn't handle diff views at all: https://tailwindcss-com-git-fork-sayanchaterjee-fea-b7f6d8-tailwindlabs.vercel.app/docs/upgrade-guide#using-postcss
Maybe a better way is to either use the output from shiki somehow or rely on the DOM state to get the visible code?
I'm not sure what I'd expect to happen there for the diff example though. Maybe it's fine because in v3 this also didn't do anything special, see app.js here.
I have added a copy button which will enable the users to copy the code snippets of the steps of installation. Manually copying each and every installation code is tedious.