Skip to content

Conversation

@praffq
Copy link

@praffq praffq commented Oct 22, 2025

Problem

Copy buttons were non-functional on terminal animation blocks (.termy class) throughout the documentation.

Steps to Reproduce

  1. Go to https://fastapi.tiangolo.com/tutorial/first-steps/
  2. Scroll to a terminal code block (animated terminal section)
  3. Click on the copy to clipboard icon
  4. Try to paste the content
  5. Actual: Nothing is copied to clipboard
  6. Expected: Code content should be copied to clipboard

Cause

The terminal animation code replaced <code> elements with <div> elements, breaking Material for MkDocs' copy button functionality.

Solution

Updated docs/en/docs/js/custom.js to recreate functional copy buttons after terminal animations are initialized. The new buttons:

  • Store original text content before element replacement
  • Use the Clipboard API to copy text
  • Provide visual feedback on successful copy

Screenshots

After

image

@github-actions github-actions bot added the docs Documentation about how to use FastAPI label Oct 22, 2025
@github-actions
Copy link
Contributor

@alejsdev alejsdev changed the title Fix: Copy button not working on terminal code blocks in docs 🐛 Copy button not working on terminal code blocks in docs Oct 24, 2025
@alejsdev alejsdev added bug Something isn't working and removed docs Documentation about how to use FastAPI labels Oct 24, 2025
@alejsdev alejsdev self-assigned this Oct 24, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants