docs: handle rendering code blocks without language (adobe#9400)

reidbarber · web-flow · commit f7811f310e06 · 2025-12-22T18:33:33.000Z
* handle rendering code blocks without language

* remove unused text language

* remove classname lang extraction
diff --git a/packages/dev/s2-docs/pages/react-aria/mcp.mdx b/packages/dev/s2-docs/pages/react-aria/mcp.mdx
@@ -61,7 +61,7 @@ For more information, see the [Claude Code MCP documentation](https://docs.claud
 
 Create or edit the configuration file `~/.codex/config.toml` and add:
 
-```js
+```
 [mcp_servers.react-aria]
 command = "npx"
 args = ["@react-aria/mcp@latest"]
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-0-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-0-0.mdx
@@ -105,7 +105,7 @@ In this release, we made a few last API updates to React Aria Components as they
 
 ## Released packages
 
-```json
+```
  - react-aria@3.31.0
  - react-aria-components@1.0.0
  - react-stately@3.29.0
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-1-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-1-0.mdx
@@ -83,7 +83,7 @@ As always, huge thanks and appreciation for everyone in our community for their
 
 ## Released packages
 
-```json
+```
  - react-aria@3.32.0
  - react-aria-components@1.1.0
  - react-stately@3.30.0
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-10-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-10-0.mdx
@@ -81,7 +81,7 @@ As always, thank you to our community for their support and contributions!
 
 ## Released packages
 
-```json
+```
  - react-aria@3.41.0
  - react-aria-components@1.10.0
  - react-stately@3.39.0
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-11-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-11-0.mdx
@@ -100,7 +100,7 @@ As always, thanks so much to everyone who contributed to this release!
 
 ## Released packages
 
-```json
+```
  - react-aria@3.42.0
  - react-aria-components@1.11.0
  - react-stately@3.40.0
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-12-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-12-0.mdx
@@ -88,7 +88,7 @@ As always, a big thank you to everyone in the community for your feedback and co
 
 ## Released packages
 
-```json
+```
  - react-aria@3.43.0
  - react-aria-components@1.12.0
  - react-stately@3.41.0
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-13-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-13-0.mdx
@@ -84,7 +84,7 @@ To support multi-selection in React Aria Select, we are updating the API from `s
 
 ## Released packages
 
-```json
+```
  - react-aria@3.44.0
  - react-aria-components@1.13.0
  - react-stately@3.42.0
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-14-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-14-0.mdx
@@ -87,7 +87,7 @@ As usual, we have included various new features and bug fixes, including support
 
 ## Released packages
 
-```json
+```
  - @internationalized/date@3.10.1
  - @react-aria/actiongroup@3.7.22
  - @react-aria/autocomplete@3.0.0-rc.4
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-2-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-2-0.mdx
@@ -142,7 +142,7 @@ Last but not least, we want to acknowledge all the wonderful contributors who ha
 
 ## Released packages
 
-```json
+```
  - react-aria@3.33.0
  - react-aria-components@1.2.0
  - react-stately@3.31.0
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-3-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-3-0.mdx
@@ -147,7 +147,7 @@ Because of various breaking changes, several packages are being bumped a major v
 
 ## Released packages
 
-```json
+```
  - react-aria@3.34.0
  - react-aria-components@1.3.0
  - react-stately@3.32.0
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-4-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-4-0.mdx
@@ -86,7 +86,7 @@ Huge thanks as always to everyone who contributed to this release! 😍
 
 ## Released packages
 
-```json
+```
  - react-aria-components@1.4.0
  - react-aria@3.35.0
  - react-stately@3.33.0
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-5-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-5-0.mdx
@@ -96,7 +96,7 @@ React Aria is now [Typescript Strict](https://www.typescriptlang.org/tsconfig/#s
 
 ## Released packages
 
-```json
+```
  - react-aria@3.36.0
  - react-aria-components@1.5.0
  - react-stately@3.34.0
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-6-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-6-0.mdx
@@ -81,7 +81,7 @@ We are also excited to announce the alpha release of the [@react-aria/test-utils
 
 ## Released packages
 
-```json
+```
  - react-aria@3.37.0
  - react-aria-components@1.6.0
  - react-stately@3.35.0
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-7-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-7-0.mdx
@@ -118,7 +118,7 @@ Autocomplete
 
 ## Released packages
 
-```json
+```
  - react-aria@3.38.0
  - react-aria-components@1.7.0
  - react-stately@3.36.0
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-8-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-8-0.mdx
@@ -76,7 +76,7 @@ A huge thank you once again to everyone in the community for all of your feedbac
 
 ## Released packages
 
-```json
+```
  - react-aria@3.39.0
  - react-aria-components@1.8.0
  - react-stately@3.37.0
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-9-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-9-0.mdx
@@ -64,7 +64,7 @@ As always, thank you to our community for their support and contributions!
 
 ## Released packages
 
-```json
+```
  - react-aria@3.40.0
  - react-aria-components@1.9.0
  - react-stately@3.38.0
diff --git a/packages/dev/s2-docs/pages/s2/mcp.mdx b/packages/dev/s2-docs/pages/s2/mcp.mdx
@@ -61,7 +61,7 @@ For more information, see the [Claude Code MCP documentation](https://docs.claud
 
 Create or edit the configuration file `~/.codex/config.toml` and add:
 
-```js
+```
 [mcp_servers.react-spectrum-s2]
 command = "npx"
 args = ["@react-spectrum/mcp@latest"]
diff --git a/packages/dev/s2-docs/src/Code.tsx b/packages/dev/s2-docs/src/Code.tsx
@@ -56,20 +56,39 @@ type Links = {[name: string]: string};
 export interface ICodeProps {
   children: string,
   lang?: string,
+  isFencedBlock?: boolean,
   hideImports?: boolean,
   links?: Links,
   styles?: StyleString
 }
 
-export function Code({children, lang, hideImports = true, links, styles}: ICodeProps) {
-  if (lang) {
+// Check if a language is supported by tree-sitter for syntax highlighting
+function isSupportedLanguage(lang: string): boolean {
+  const supported = ['js', 'jsx', 'ts', 'tsx', 'css', 'json'];
+  return supported.includes(lang.toLowerCase());
+}
+
+export function Code({children, lang, isFencedBlock, hideImports = true, links, styles}: ICodeProps) {
+  // If language is provided and is a supported syntax highlighting language
+  if (lang && isSupportedLanguage(lang)) {
     return (
       <code className={styles} style={{fontFamily: 'inherit', WebkitTextSizeAdjust: 'none'}}>
         <CodeClient tokens={highlightCode(children, lang, hideImports, links)} />
       </code>
     );
   }
 
+  // If inside a fenced code block (pre element) or has an unsupported language,
+  // render as plain text block without syntax highlighting
+  if (isFencedBlock || lang) {
+    return (
+      <code className={styles} style={{fontFamily: 'inherit', WebkitTextSizeAdjust: 'none'}}>
+        {children}
+      </code>
+    );
+  }
+
+  // Inline code style
   return (
     <code
       className={style({
diff --git a/packages/dev/s2-docs/src/CodeBlock.tsx b/packages/dev/s2-docs/src/CodeBlock.tsx
@@ -29,7 +29,7 @@ const example = style({
   marginX: 'auto'
 });
 
-const standaloneCode = style({
+export const standaloneCode = style({
   '--code-padding-start': {
     type: 'paddingStart',
     value: {
diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
@@ -12,7 +12,7 @@ import './anatomy.css';
 import './footer.css';
 import {ClassAPI} from './ClassAPI';
 import {Code} from './Code';
-import {CodeBlock} from './CodeBlock';
+import {CodeBlock, standaloneCode} from './CodeBlock';
 import {CodePlatterProvider} from './CodePlatter';
 import {Divider, Provider, ToastContainer} from '@react-spectrum/s2';
 import {ExampleSwitcher} from './ExampleSwitcher';
@@ -42,6 +42,15 @@ const components = (isLongForm?: boolean) => ({
   Figure: (props) => <figure {...props} className={style({display: 'flex', flexDirection: 'column', alignItems: 'center', marginY: 32, marginX: 0})} />,
   Caption: (props) => <figcaption {...props} className={style({font: 'body-sm'})} />,
   CodeBlock: CodeBlock,
+  pre: ({children, ...props}) => (
+    <pre {...props} className={standaloneCode}>
+      {React.Children.map(children, child =>
+        React.isValidElement(child)
+          ? React.cloneElement(child as React.ReactElement<any>, {isFencedBlock: true})
+          : child
+      )}
+    </pre>
+  ),
   code: (props) => <Code {...props} />,
   strong: ({children, ...props}) => <strong {...props} className={style({fontWeight: 'bold'})}>{children}</strong>,
   a: (props) => <Link {...props} />,
