Skip to content

Conversation

@shekhar-narayan-mishra
Copy link

@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>
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.

1 participant