Add copy-to-clipboard button for code snippets

[SnehaChaursia]

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

[SnehaChaursia]

@MakisH Please take a look on this feature.

[MakisH]

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.

[hanzalahwaheed]

Tested this locally. Works superb!

Minor suggestion: I did notice at some places the text gets hidden due to the button, so maybe we get rid of the button texts here, i.e. no "Copy"/"Copied" texts, just the Copy Icon and the Check Icon would make the button smaller. Many websites do this.

Thanks!

[precice-bot]

This pull request has been mentioned on preCICE Forum on Discourse. There might be relevant details there:

https://precice.discourse.group/t/gsoc-2026-introduction-hanzalah-waheed/2745/5

[MakisH]

Looks indeed very nice, thank you!

I guess the implementation could be clearer at parts, but we will probably not need it later. Still, in the meantime, this seems to be simple enough.

[MakisH]

Why is this needed?

[SnehaChaursia]

This is a well-known pattern for cross-browser clipboard copying the textarea must be in the DOM to be selectable, but positioned way off-screen so users never see it. @MakisH

[SnehaChaursia]

Tested this locally. Works superb!

Minor suggestion: I did notice at some places the text gets hidden due to the button, so maybe we get rid of the button texts here, i.e. no "Copy"/"Copied" texts, just the Copy Icon and the Check Icon would make the button smaller. Many websites do this.

Thanks!

Hi, sorry for the late response—I missed this earlier due to some other commitments.

Thanks a lot for the suggestion, I really like the idea of using just icons to make the button cleaner as per modern technique. Since the PR is already merged, I won’t be able to update it now, but I’ve noted this for future contributions and even made the change already in local . I’ll definitely incorporate this improvement in upcoming PRs.

Thank you for testing it and sharing feedback!