Skip to content

fix(html-handler): add kbd element display support - #1848

Open
ankitrajchoudhari wants to merge 1 commit into
freeCodeCamp:mainfrom
ankitrajchoudhari:fix/handle-kbd-element-display
Open

ankitrajchoudhari wants to merge 1 commit into
freeCodeCamp:mainfrom
ankitrajchoudhari:fix/handle-kbd-element-display

Conversation

@ankitrajchoudhari

Copy link
Copy Markdown

Problem

Keystrokes in the freeCodeCamp curriculum are now represented with <kbd>
elements instead of <code>. The mobile app had no <kbd> handling, so
these elements render without styling.

Ref: freeCodeCamp/freeCodeCamp#69619

Solution

  • Added 'kbd' to defaultStyles matching 'code' styling
  • Added a TagExtension for 'kbd' rendering a keyboard-key visual with
    gray background, 4px radius, subtle border, and Hack monospace font

Testing

  • Additive change only — no existing handlers modified

Note: Aware of code freeze (#1841). Happy to keep open until freeze lifts.

Closes #1845

Keystrokes in freeCodeCamp curriculum are now represented with
<kbd> instead of <code>. This adds a Style entry and a TagExtension
for kbd elements so they render as keyboard key indicators with a
monospace font, gray background, rounded corners, and a subtle border.

Closes freeCodeCamp#1845
@ankitrajchoudhari
ankitrajchoudhari requested a review from a team as a code owner October 8, 2026 19:40
Copilot AI balanced review requested due to automatic review settings October 8, 2026 19:40

Copilot AI 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.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Handle kbd

3 participants