Skip to content

Add copy-to-clipboard button for code snippets#814

Open
SnehaChaursia wants to merge 2 commits intoprecice:masterfrom
SnehaChaursia:feat/add-copy-button
Open

Add copy-to-clipboard button for code snippets#814
SnehaChaursia wants to merge 2 commits intoprecice:masterfrom
SnehaChaursia:feat/add-copy-button

Conversation

@SnehaChaursia
Copy link
Contributor

@SnehaChaursia SnehaChaursia commented Feb 26, 2026

Description of Changes

This PR introduces a highly requested quality-of-life feature for the documentation website: a "Copy to Clipboard" button for all code blocks.
Changes made:

  • Code Injection (js/copy-code.js): Added a vanilla JavaScript file that dynamically injects a <button> into all .highlighter-rouge elements.
  • Clipboard API: Utilizes the modern navigator.clipboard.writeText API to securely copy code text, with a robust fallback for older browsers or non-secure contexts.
  • Styling (css/customstyles-precice.css): Styled the button to sit unobtrusively in the top right corner of code snippets. The button remains transparent and elegantly fades in on hover.
  • Global Integration (_includes/footer.html): Included the new JavaScript file in the global footer so it functions seamlessly across all documentation pages and tutorials.
  • Visual Feedback: The button temporarily changes to read "Copied!" with a checkmark upon successful click.

Verification

  • Tested locally using bundle exec jekyll serve.
  • Verified the button correctly targets all code blocks without capturing unintended HTML structure.
  • Verified visual feedback timeout works as expected.

ScreenShot

image

@MakisH MakisH added technical Technical issues on the website GSoC Contributed in the context of the Google Summer of Code labels Feb 26, 2026
@SnehaChaursia
Copy link
Contributor Author

@MakisH Please take a look on this feature.

@MakisH
Copy link
Member

MakisH commented Mar 1, 2026

I am aware of this PR (and many other new PRs), I will take a look later in a few days. Busy week coming up.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

GSoC Contributed in the context of the Google Summer of Code technical Technical issues on the website

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants