feat: add copy-to-clipboard button on all code blocks#740
Closed
aayushi-singhhh wants to merge 2 commits intoprecice:masterfrom
Closed
feat: add copy-to-clipboard button on all code blocks#740aayushi-singhhh wants to merge 2 commits intoprecice:masterfrom
aayushi-singhhh wants to merge 2 commits intoprecice:masterfrom
Conversation
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.
Member
|
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. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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)
css/customstyles-precice.css (appended, ~65 lines)
_includes/head.html (1 line added)
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.
