Skip to content

Add Copy-to-Clipboard Button for Code Blocks #2745

@shekhar-narayan-mishra

Description

@shekhar-narayan-mishra

Problem

The documentation at https://docs.deno.com currently lacks a copy-to-clipboard button on code blocks. Users must manually select and copy command-line examples, which is inefficient and error-prone—especially for long commands or multiline examples.


Proposed Solution

Add a visible copy button to each <pre><code> block that:

  • Appears on the top-right corner (pinned)
  • Copies raw text (excluding shell prompts like $, ❯, %, etc.)
  • Shows a visual confirmation (checkmark) when copied
  • Remains pinned even when the code is horizontally scrollable (like GitHub or ChatGPT)

Why It Matters

This significantly improves user experience, particularly for beginners referencing install or setup commands. Most modern documentation systems already support this feature (e.g. GitHub, Vercel, Next.js, ChatGPT).


Screenshots

Before:

Before

After:

After

Working Implementation

I have already implemented a working prototype in my fork:
🔗 https://github.com/shekhar-narayan-mishra/docs/tree/feat/docs-copy-button

I will raise a pull request referencing this issue shortly.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions