feat: add copy button to code blocks in markdown preview#323609
feat: add copy button to code blocks in markdown preview#323609rushil-b-patel wants to merge 1 commit into
Conversation
|
@microsoft-github-policy-service agree |
There was a problem hiding this comment.
Pull request overview
This PR adds a GitHub-style “copy code” affordance to the Markdown preview webview by injecting an icon-only button into rendered code blocks and styling it to appear on hover/focus, with a temporary “copied” checkmark state after activation.
Changes:
- Inject a copy button into each
pre > codeblock on initial load and on preview content updates. - Implement inline SVG icons (copy + check) and clipboard write behavior on click.
- Add CSS for positioning and hover/focus styling of the copy button within code blocks.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| extensions/markdown-language-features/preview-src/index.ts | Adds DOM injection and clipboard handling for code-block copy buttons in the preview webview. |
| extensions/markdown-language-features/media/markdown.css | Adds styling for the code-block copy button and updates <pre> positioning to support it. |
| pre:hover > .code-block-copy-button, | ||
| .code-block-copy-button:focus { | ||
| opacity: 1; | ||
| } |
| .code-block-copy-button { | ||
| position: absolute; | ||
| top: 8px; | ||
| right: 8px; |
rushil-b-patel
force-pushed
the
main-copy-code-block-markdown-preview
branch
from
d379b4d to
a0e2af4
Compare
|
Hello @mjbvz, I see you have worked in markdown features. |
|
Hello @vritant24 Can you please delegate to appropriate person for this PR ? |
|
Hello @hediet any update here :) ! |
|
Thanks for the PR! |
|
Hello @hediet Thanks for your time. |
Adds a GitHub-style copy button that appears on hover in the top-right corner of code blocks in the markdown preview. Clicking copies the code block content to the clipboard and shows a checkmark confirmation.
Head branch was pushed to by a user without write access
rushil-b-patel
force-pushed
the
main-copy-code-block-markdown-preview
branch
from
a0e2af4 to
1c5ada8
Compare
|
Hello @hediet, I rebase & pushed to avoid that failing check. Hope you won't mind. Thanks : ) |
Adds a GitHub-style copy button that appears on hover in the top-right corner of code blocks in the markdown preview. Clicking copies the code block content to the clipboard and shows a checkmark confirmation.
fixes: #322269