Thanks to visit codestin.com
Credit goes to github.com

Skip to content

📝 Fix copy button copying HTML markup on Termynal command lines#15812

Open
patrickwehbe wants to merge 1 commit into
fastapi:masterfrom
patrickwehbe:fix-termynal-copy-html
Open

📝 Fix copy button copying HTML markup on Termynal command lines#15812
patrickwehbe wants to merge 1 commit into
fastapi:masterfrom
patrickwehbe:fix-termynal-copy-html

Conversation

@patrickwehbe

Copy link
Copy Markdown

What this fixes

Several pages in the docs write the terminal input lines inside termy/console blocks with HTML coloring, for example:

$ <font color="#4E9A06">fastapi</font> dev

Termynal animates the input line using textContent, so the <font> tags never render on screen. However, MkDocs Material's copy button reads the underlying code, not the rendered text, so clicking it copies the literal markup:

<font color="#4E9A06">fastapi</font> dev

Users then paste the markup instead of the command.

The fix

Strip the HTML wrappers from only the $ input command lines so the copy button yields the plain command. The colored output lines below each command are intentional styling and are left untouched.

The homepage block already uses the plain $ fastapi dev form and copies correctly, so this just brings these pages in line with it.

Lines changed (input commands only):

  • docs/en/docs/fastapi-cli.md
  • docs/en/docs/tutorial/first-steps.md
  • docs/en/docs/tutorial/index.md
  • docs/en/docs/deployment/manually.md
  • docs/en/docs/deployment/server-workers.md

See discussion #15700.

Several docs have terminal input lines written with HTML coloring, like
`$ <font color="#4E9A06">fastapi</font> dev`. Termynal animates the input
using textContent, so the <font> tags never render on screen, but the
Material copy button reads the underlying code and copies the literal
markup. Users end up pasting `<font color="#4E9A06">fastapi</font> dev`
instead of the command.

Strip the HTML wrappers from only the `$` input command lines so the
copy button yields the plain command, matching the homepage block which
already uses the plain form. The colored output lines below each command
are left unchanged.

See discussion fastapi#15700.
@github-actions github-actions Bot added the docs Documentation about how to use FastAPI label Jun 20, 2026

@mohamedtaqysalmi mohamedtaqysalmi left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Stripping Termynal HTML markup from the copy payload fixes a real UX bug where users paste styled spans instead of plain commands. Scoped to deployment/tutorial Termynal blocks — good that tests or manual verification covered multiple pages using the same pattern.

@svlandeg

Copy link
Copy Markdown
Member

@mohamedtaqysalmi : I feel like you're using AI to produce these reviews, is that correct?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs Documentation about how to use FastAPI

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants