[Eugene (OEvgeny)]

Code samples show the programming language as sent by the bot, with only the first letter capitalized, e.g. "Javascript" instead of "JavaScript" (follow-up to #5893).

Changelog Entry

Fixed

• Fixed code samples, such as in the "View code" dialog, titled "Javascript" instead of "JavaScript": common programming languages and their aliases, such as js, now show their proper names, which can be overridden via overrideLocalizedStrings (PROGRAMMING_LANGUAGE_*), in PR #5896, by @OEvgeny
• Fixed code not being highlighted when the programming language is not in lowercase, such as TS, in PR #5896, by @OEvgeny

Description

The titles of collapsible code blocks and of the "View code" dialog were the raw programmingLanguage of the message, capitalized only by CSS, so javascript showed as "Javascript" and the dialog was labelled "Code sample: javascript". Common languages and their aliases (case-insensitive) now map to localizable titles, e.g. js to "JavaScript" and py to "Python"; other languages, such as bash, keep their first letter capitalized. The language is also lower-cased for the highlighter, so TS is highlighted like ts.

Design

• Titles are localizable strings (PROGRAMMING_LANGUAGE_*), so hosts can override them via overrideLocalizedStrings; languages whose title is just the capitalized name, such as Go, have no string.
• Names and aliases follow Shiki's language list, which is not imported: it would add every grammar to the bundle.
• Open question: should programming language names go through translation at all?

Specific Changes

• component/src/hooks/internal/useLocalizeProgrammingLanguage.ts: new internal hook that maps a language or alias to its localized title
• StackedLayout.tsx and MarkdownTextContent.tsx: use the hook for the titles of the code block and the "View code" dialog
• CodeBlockContent.module.css and ViewCodeDialog.module.css: removed the text-transform capitalization
• api/src/localization/en-US.json: added 20 PROGRAMMING_LANGUAGE_* strings
• bundle/src/codeHighlighter/ShikiComposer.tsx: lower-cases the language before highlighting
• Added __tests__/html2/activity/programmingLanguageTitle.html: lowercase, uppercase, alias, overridden, and unknown languages in collapsible code blocks and the "View code" dialog
• Updated the markdown/codeBlock/contrast* and activity/collapsible* snapshots, which also pick up the final comment color from Ensure 4.5:1 contrast for syntax-highlighted code and keep code blocks when messages are already in the store #5893

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)

[Copilot]

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