Skip to content

feat(docs): add copy button to code blocks#344

Open
yashksaini-coder wants to merge 1 commit into
huggingface:mainfrom
yashksaini-coder:feat/docs-copy-code-button
Open

feat(docs): add copy button to code blocks#344
yashksaini-coder wants to merge 1 commit into
huggingface:mainfrom
yashksaini-coder:feat/docs-copy-code-button

Conversation

@yashksaini-coder

@yashksaini-coder yashksaini-coder commented Jul 12, 2026

Copy link
Copy Markdown

Summary

  • Adds a clipboard icon button to every <pre> code block in the docs, always visible (no hover to reveal).
  • Clicking copies the code to clipboard via navigator.clipboard.writeText() and briefly shows a green checkmark for 2 s.
  • Button is vertically centered on the right edge of the block — works correctly for both single-line and multi-line blocks.
  • SVG icons are injected safely via DOMParser + appendChild — no innerHTML usage.
  • Script loads only on doc pages via the scripts template block in layouts/doc/single.html — no impact on landing or other page types.

No new dependencies. No changes to markdown content or build config.

Fixes #343

Files changed

File Change
website/assets/js/copy-code.js New: injects icon copy button into each .docs-content pre via DOM APIs
website/assets/css/main.css New .copy-btn styles: always visible, vertically centered, green on copied
website/layouts/doc/single.html Adds scripts block to load the JS only on doc pages

Test plan

  • Run hugo server in website/, open any doc page (e.g. /guides/sessions/)
  • Confirm clipboard icon button is visible by default on all code blocks (no hover needed)
  • Click it — icon switches to a green checkmark, clipboard contains the code text
  • Verify button is vertically centered on single-line and multi-line blocks
  • Verify no copy button appears on the homepage or Why Tau page
  • Verify existing code block styling (dark background, syntax highlighting) is unchanged

image

Adds a hover-revealed Copy button to every <pre> block in the docs
content area. Clicking it copies to clipboard via the Clipboard API
and flashes a green "Copied!" confirmation for 2 s.

The script is loaded only on doc pages via the `scripts` template
block, so landing and other page types are unaffected. No new
dependencies.

Closes huggingface#343
@yashksaini-coder yashksaini-coder force-pushed the feat/docs-copy-code-button branch from c331804 to 81b629d Compare July 12, 2026 04:41
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.

docs: add copy button to code blocks

1 participant