Fix more incorrect markdown langs (#41939)

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

x-ref: #41926

docs/advanced-features/react-18/switchable-runtime.md

@@ -12,12 +12,13 @@ By default, Next.js uses the Node.js runtime. [Middleware](https://nextjs.org/do
 
 To configure the runtime for your whole application, you can set the experimental option `runtime` in your `next.config.js` file:
 
-```js:next.config.js
+```js
+// next.config.js
 module.exports = {
   experimental: {
     runtime: 'experimental-edge', // 'node.js' (default) | experimental-edge
   },
-};
+}
 ```
 
 You can detect which runtime you're using by looking at the `process.env.NEXT_RUNTIME` Environment Variable during runtime, and examining the `options.nextRuntime` variable during compilation.

docs/api-reference/next/font.md

@@ -194,26 +194,29 @@ If you would like to set your styles in an external style sheet and specify addi
 
 In addition to importing the font, also import the CSS file where the CSS variable is defined and set the variable option of the font loader object as follows:
 
-```tsx:app/page.tsx
-import { Inter } from '@next/font/google';
-import styles from '../styles/component.module.css';
+```tsx
+// app/page.tsx
+import { Inter } from '@next/font/google'
+import styles from '../styles/component.module.css'
 
 const inter = Inter({
   variable: '--inter-font',
-});
+})
 ```
 
 To use the font, set the `className` of the parent container of the text you would like to style to the font loader's `variable` value and the `className` of the text to the `styles` property from the external CSS file.
 
-```tsx:app/page.tsx
+```tsx
+// app/page.tsx
 <main className={inter.variable}>
   <p className={styles.text}>Hello World</p>
 </main>
 ```
 
 Define the `text` selector class in the `component.module.css` CSS file as follows:
 
-```css:styles/component.module.css
+```css
+/* styles/component.module.css */
 .text {
   font-family: var(--inter-font);
   font-weight: 200;
@@ -231,7 +234,8 @@ For example, create a `fonts.ts` file in a `styles` folder at the root of your a
 
 Then, specify your font definitions as follows:
 
-```ts:styles/fonts.ts
+```ts
+// styles/fonts.ts
 import { Inter, Lora, Source_Sans_Pro } from '@next/font/google';
 import localFont from '@next/font/local';
 
@@ -249,7 +253,8 @@ export { inter, lora, sourceCodePro400, sourceCodePro700, greatVibes };
 
 You can now use these definitions in your code as follows:
 
-```tsx:app/page.tsx
+```tsx
+// app/page.tsx
 import { inter, lora, sourceCodePro700, greatVibes } from '../styles/fonts';
 
 export default function Page() {
@@ -268,7 +273,8 @@ export default function Page() {
 
 To make it easier to access the font definitions in your code, you can define a path alias in your `tsconfig.json` or `jsconfig.json` files as follows:
 
-```json:tsconfig.json
+```json
+// tsconfig.json
 {
   "compilerOptions": {
     "paths": {
@@ -280,7 +286,8 @@ To make it easier to access the font definitions in your code, you can define a
 
 You can now import any font definition as follows:
 
-```tsx:app/about/page.tsx
+```tsx
+// app/about/page.tsx
 import { greatVibes, sourceCodePro400 } from '@/fonts';
 ``` -->
 

docs/basic-features/font-optimization.md

@@ -77,20 +77,22 @@ This can be done in 2 ways:
 
 - On a font per font basis by adding it to the function call
 
-  ```tsx:app/layout.tsx
-  const inter = Inter({ subsets: ["latin"] });
+  ```tsx
+  // app/layout.tsx
+  const inter = Inter({ subsets: ['latin'] })
   ```
 
 - Globally for all your fonts in your `next.config.js`
 
-  ```js:next.config.js
+  ```js
+  // next.config.js
   module.exports = {
     experimental: {
       fontLoaders: [
         { loader: '@next/font/google', options: { subsets: ['latin'] } },
       ],
     },
-  };
+  }
   ```
 
   - If both are configured, the subset in the function call is used.