Skip to content

Add copy button on hover for code blocks #352

@mickdarling

Description

@mickdarling

Summary

Add a copy-to-clipboard button that appears when hovering over code blocks, making it easy to copy code snippets.

Description

Currently, users must manually select and copy code from code blocks. A hover-activated copy button would improve UX significantly.

Proposed Behavior

  • Copy button appears in the top-right corner of code blocks on mouse hover
  • Clicking the button copies the code block content to clipboard
  • Visual feedback on successful copy (e.g., checkmark icon or "Copied!" text)
  • Button fades out when mouse leaves the code block area

Acceptance Criteria

  • Copy button appears on hover for all code blocks (fenced and inline)
  • Button copies raw code (without syntax highlighting markup)
  • Visual feedback confirms successful copy
  • Works across all preview themes
  • Accessible via keyboard navigation

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions