diff --git a/docs/advanced-features/react-18/switchable-runtime.md b/docs/advanced-features/react-18/switchable-runtime.md
index 69d9c8816cece9c..cdd5268e825ddd7 100644
--- a/docs/advanced-features/react-18/switchable-runtime.md
+++ b/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.
diff --git a/docs/api-reference/next/font.md b/docs/api-reference/next/font.md
index 4e3ea5952a52729..97a324fedc5698e 100644
--- a/docs/api-reference/next/font.md
+++ b/docs/api-reference/next/font.md
@@ -194,18 +194,20 @@ 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>
@@ -213,7 +215,8 @@ To use the font, set the `className` of the parent container of the text you wou
 
 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';
 ``` -->
 
diff --git a/docs/basic-features/font-optimization.md b/docs/basic-features/font-optimization.md
index d05d1e19e6839a1..f11612782901286 100644
--- a/docs/basic-features/font-optimization.md
+++ b/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.