Skip to content

feat(docs): add pinned copy-to-clipboard button for code blocks#2743

Closed
shekhar-narayan-mishra wants to merge 2 commits intodenoland:mainfrom
shekhar-narayan-mishra:feat/docs-copy-button
Closed

feat(docs): add pinned copy-to-clipboard button for code blocks#2743
shekhar-narayan-mishra wants to merge 2 commits intodenoland:mainfrom
shekhar-narayan-mishra:feat/docs-copy-button

Conversation

@shekhar-narayan-mishra
Copy link
Copy Markdown

@shekhar-narayan-mishra shekhar-narayan-mishra commented Nov 26, 2025

Summary

This PR adds a copy-to-clipboard button to all

 blocks in the Deno documentation.

Previously, users had to manually select and copy code snippets, which was inefficient and error-prone — especially for longer commands. This enhancement improves usability by adding a persistent, accessible copy button that works across all code blocks.

Features

✨ Adds a copy button pinned to the top-right corner of every code block

✨ Handles horizontal scrolling: button stays fixed while code scrolls

✨ Strips shell prompts like $, >, and ❯ before copying

✅ Displays a ✔️ check icon briefly after successful copy

✅ Styled to blend with the existing docs look (no emojis, clean UI)

Implementation

copy.client.ts: injects the copy button and handles copy logic

styles.css: includes styles for button positioning, appearance, and animation

Code is scoped and non-invasive; it de-duplicates any existing theme-based buttons

How to Test Locally

Run the dev server:

deno task serve

Visit any page with code examples (e.g. Install or Getting Started)

Hover over a code block — confirm:

Copy icon is pinned to top-right

It stays fixed during horizontal scroll

Clicking it copies the code (without $, >, etc.)

A check icon appears briefly then reverts

Linked Issue:

Closes #2745

Screenshots

Before:

Before copy button

After:

After copy button added

Notes for Reviewers

This is a non-breaking, client-side UX improvement

Does not modify build, runtime, or API logic

Happy to refine styling or placement if requested

- pin copy button to top-right of docs code blocks (stays fixed while code scrolls)
- add minimal right padding so code isn't overlapped

Signed-off-by: shekhar-narayan-mishra <shekhar.mishra@adypu.edu.in>
@bartlomieju
Copy link
Copy Markdown
Member

Thanks for the contribution! However, the docs site already has a copy-to-clipboard button on all code blocks. It's implemented as a build-time markdown-it plugin (markdown-it/codeblock-copy.ts) that injects a copy button into every fenced code block, with the click handler in js/copy.ts.

The existing approach is preferable since the button is available immediately on page load (no DOMContentLoaded delay) and the copy text is captured from the raw markdown at build time, avoiding any issues with scraping rendered DOM content.

Closing as the feature already exists. If there's a specific issue with the current copy button (not appearing on certain pages, etc.), feel free to open a new issue describing the problem!

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.

2 participants