Copy button on docs termynal blocks copies HTML tags instead of plain commands #15700
Replies: 4 comments 1 reply
|
I was able to reproduce this issue on my side. Reproduction Test Environment
Steps
Expected Result fastapi dev Actual Result fastapi dev Analysis Based on the description and the examples provided, the issue appears to be related to the copy functionality reading the underlying HTML source from the code block rather than the plain text representation. The command is authored with inline HTML formatting: fastapi dev Although the page renders correctly, the copy action preserves the HTML markup, causing users to paste invalid shell commands. Proposed Fix Removing the inline HTML formatting from the affected documentation files seems like the simplest and safest solution. The visual styling does not appear to be necessary for the command examples, and removing it would ensure the copy button produces clean executable commands. I also verified that the issue is reproducible on the affected documentation pages listed in this discussion. A PR for the English documentation files would be a welcome improvement from my perspective. I was able to reproduce this issue on Windows 11 using Chrome as well, so the behavior does not appear to be limited to macOS. |
|
Let me investigate it a bit. |
This comment was marked as spam.
This comment was marked as spam.
|
Hi @YuriiMotov, following up on your point about preserving the formatting. I agree, and it changed my approach. Instead of removing the HTML from the markdown files, the fix can live in I tested it locally on all the affected pages and the terminal animation renders as before. I have opened a PR with the change: #15941 |
Uh oh!
There was an error while loading. Please reload this page.
First Check
Commit to Help
Example Code
Description
Problem: On some docs pages, the copy button on termynal terminal blocks copies HTML tags into the clipboard instead of the plain shell command.
What I'm doing: Reading the FastAPI docs and using the copy button to copy
fastapi dev.Expected: Clipboard contains
fastapi devActual: Clipboard contains
<font color="#4E9A06">fastapi</font> devCause: The
$ ...command line in markdown contains HTML (e.g.<font color="#4E9A06">fastapi</font>) intended for terminal styling. Termynal's typing animation usestextContentfor input lines, so the HTML never renders visually on the command but it remains in the hidden<code>element that MkDocs Material's copy button reads.Related prior work:
Proposed fix: Remove dead HTML from
$ ...command lines in English docs, matching the homepage style ($ fastapi devinstead of$ <font...>fastapi</font> dev). The HTML doesn't affect display on input lines anyway.Affected English files:
Same issue exists in translated docs. Happy to leave those for translators.
Question: Would a PR with this English docs fix be welcome?
Operating System
macOS
Operating System Details
Chrome on macOS
FastAPI Version
N/A docs website bug, not a FastAPI runtime issue
Pydantic Version
N/A docs website bug, not a FastAPI runtime issue
Python Version
N/A docs website bug, not a FastAPI runtime issue
Additional Context
Attached a GIF showing the copy-paste bug on https://fastapi.tiangolo.com/tutorial/
pasted text includes HTML tags like
<font color="#4E9A06">fastapi</font> devinstead of plainfastapi dev.All reactions