Skip to content

Conversation

@Rishi2600
Copy link

@Rishi2600 Rishi2600 commented Nov 21, 2025

Fixes #645

Changes

  • Added a copy button that appears on hover over code blocks
  • Implemented clipboard functionality with fallback support for older browsers
  • Added visual feedback ("Copied!" confirmation message)
  • Styled with Primer CSS design conventions
  • Mobile-friendly (always visible on touch devices)

Implementation

  • Created js/copy-code.js with copy functionality and button creation logic
  • Created assets/css/copy-code.css with styling for the copy button
  • Updated _layouts/default.liquid to include the new CSS and JS files

For any feature updates or any other details, Contact - github.com/Rishi2600

- Add copy button that appears on hover for all code blocks
- Include visual feedback with 'Copied!' confirmation
- Support both modern and fallback clipboard APIs
- Style with Primer design system conventions
- Mobile-friendly with always-visible button on touch devices

Fixes probot#645
rel="stylesheet"
href="/assets/dist/styles.css"
/>
<link rel="stylesheet" href="/assets/css/copyIcon.css" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be in the _layouts/docs.liquid file

</head>
<body>
{% include "nav" %} {{ content }} {% include "footer" %}
<script src="/js/copyIcon.js"></script>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be in the _layouts/docs.liquid file

color: #57ab5a;
border-color: #57ab5a;
}
} No newline at end of file
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
}
}

js/copyIcon.js Outdated
document.addEventListener("DOMContentLoaded", addCopyButtons);
} else {
addCopyButtons();
} No newline at end of file
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
}
}

@Rishi2600
Copy link
Author

Done with the changes

@Rishi2600
Copy link
Author

HEY, Just made the changes. Can you review it and let me know if anything else needs to be done?
Thanks.

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.

Add "Copy to Clipboard" button for shell commands in documentation

2 participants