Skip to content

Comments

feat: add copy-to-clipboard button on all code blocks#740

Closed
aayushi-singhhh wants to merge 2 commits intoprecice:masterfrom
aayushi-singhhh:feat/copy-code-button
Closed

feat: add copy-to-clipboard button on all code blocks#740
aayushi-singhhh wants to merge 2 commits intoprecice:masterfrom
aayushi-singhhh:feat/copy-code-button

Conversation

@aayushi-singhhh
Copy link

Adds a 'Copy' button to every Rouge-highlighted code block across the entire documentation and tutorial sections of the site.

Changes

js/copy-code.js (new file)

  • Pure vanilla JS, zero dependencies, IIFE-scoped
  • Targets all div.highlight > pre blocks (Rouge output) and bare pre > code blocks not wrapped by the highlighter
  • Uses the modern async navigator.clipboard.writeText() API
  • Falls back to a hidden textarea + document.execCommand('copy') for non-HTTPS pages and older browsers
  • Button shows 'Copied!' (green) on success, 'Failed' (red) on error, auto-resets to 'Copy' after 2 seconds
  • Button is disabled during the async copy to prevent double-clicks
  • Guards against duplicate buttons if attachCopyButtons() is called twice

css/customstyles-precice.css (appended, ~65 lines)

  • .copy-code-btn: absolutely positioned top-right of the code block, hidden (opacity:0) by default, fades in on div.highlight:hover
  • Visible on :focus for keyboard navigation
  • @media (hover: none): always visible on touch/mobile devices
  • .copy-code-btn--success: green feedback (#d4edda / #28a745)
  • .copy-code-btn--error: red feedback (#f8d7da / #dc3545)
  • .copy-code-btn:disabled: default cursor while copy is in-flight

_includes/head.html (1 line added)

  • Loads js/copy-code.js after customscripts.js on every page

Why this matters

preCICE documentation is heavily code-heavy (C++, Python, XML config, shell commands). Users currently must manually select and copy code, which is error-prone for long config blocks. This brings the site's DX in line with ReadTheDocs, GitHub, and MkDocs Material, all of which provide copy buttons as a baseline feature.

No dependencies added. No existing files modified beyond customstyles-precice.css (append-only) and head.html (1 line). Build output verified: jekyll build completes with zero errors/warnings.
Screenshot 2026-02-23 at 4 32 32 AM

aayushi-singhhh and others added 2 commits February 23, 2026 04:35
Adds a 'Copy' button to every Rouge-highlighted code block across the
entire documentation and tutorial sections of the site.

Changes
-------

js/copy-code.js (new file)
- Pure vanilla JS, zero dependencies, IIFE-scoped
- Targets all div.highlight > pre blocks (Rouge output) and bare
  pre > code blocks not wrapped by the highlighter
- Uses the modern async navigator.clipboard.writeText() API
- Falls back to a hidden textarea + document.execCommand('copy')
  for non-HTTPS pages and older browsers
- Button shows 'Copied!' (green) on success, 'Failed' (red) on error,
  auto-resets to 'Copy' after 2 seconds
- Button is disabled during the async copy to prevent double-clicks
- Guards against duplicate buttons if attachCopyButtons() is called twice

css/customstyles-precice.css (appended, ~65 lines)
- .copy-code-btn: absolutely positioned top-right of the code block,
  hidden (opacity:0) by default, fades in on div.highlight:hover
- Visible on :focus for keyboard navigation
- @media (hover: none): always visible on touch/mobile devices
- .copy-code-btn--success: green feedback (#d4edda / #28a745)
- .copy-code-btn--error:   red feedback   (#f8d7da / #dc3545)
- .copy-code-btn:disabled: default cursor while copy is in-flight

_includes/head.html (1 line added)
- Loads js/copy-code.js after customscripts.js on every page

Why this matters
----------------
preCICE documentation is heavily code-heavy (C++, Python, XML config,
shell commands). Users currently must manually select and copy code,
which is error-prone for long config blocks. This brings the site's DX
in line with ReadTheDocs, GitHub, and MkDocs Material, all of which
provide copy buttons as a baseline feature.

No dependencies added. No existing files modified beyond
customstyles-precice.css (append-only) and head.html (1 line).
Build output verified: jekyll build completes with zero errors/warnings.
@MakisH
Copy link
Member

MakisH commented Feb 23, 2026

Thank you for your contribution!

This adds some new scripts, which would not be needed once we move to a better framework (#472), which would give a better integrated button very easily.

Since this would now be additional code to maintain, and since it still would need some theming and further review to get it right, I think we should not focus our energy into this direction right now.

In any case, it's a good idea, and I hope you learned something while making it.

@MakisH MakisH closed this Feb 23, 2026
@MakisH MakisH added GSoC Contributed in the context of the Google Summer of Code technical Technical issues on the website labels Feb 23, 2026
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