Use codeblock transformers

components/files.tsx

@@ -52,7 +52,7 @@ export function Folder({ title, defaultOpen = true, children }: FolderProps): JS
         {open ? <FolderOpenIcon /> : <FolderIcon />}
         {title}
       </button>
-      <div className={open ? "ml-4 flex flex-col border-l pl-2 pt-2" : "hidden"}>{children}</div>
+      <div className={open ? "ml-2 flex flex-col border-l pl-2" : "hidden"}>{children}</div>
     </div>
   );
 }

content/metadata-client-components.mdx

@@ -8,8 +8,7 @@ authors: [joulev]
 
 The `metadata`, `generateMetadata`, `viewport` and `generateViewport` exports are only supported in server components. Hence, you need to make your page a server component to use them. A method to do that is to move all your client-side logic to a separate client component and import that client component to the now-server component `page.tsx`. So instead of
 
-```tsx
-// page.tsx
+```tsx title="page.tsx"
 "use client";
 export default function Page() {
   useSomeHook();
@@ -20,20 +19,23 @@ export const metadata = { title: "My Page" };
 
 you need to make a new client component, say `page.client.tsx`, and import it to `page.tsx`:
 
-```tsx
-// page.client.tsx
+```tsx title="page.client.tsx"
 "use client";
+
 export default function PageClient() {
   useSomeHook();
   return <Something />;
 }
+```
+
+```tsx title="page.tsx"
+import PageClient from "./page.client"; // [!code highlight]
+
+export const metadata = { title: "My Page" };
 
-// page.tsx
-import PageClient from "./page.client";
 export default function Page() {
   return <PageClient />;
 }
-export const metadata = { title: "My Page" };
 ```
 
 ## How do I set dynamic metadata that depends on client-side states?

content/server-action-call-inside-server-component-rendering.mdx

@@ -39,7 +39,7 @@ As you've seen above, `cookies().set()` does _not_ work during a server componen
 
 Use [middleware](https://nextjs.org/docs/app/building-your-application/routing/middleware) instead. It allows you to [read and set cookies both in the request and in the response](https://nextjs.org/docs/app/building-your-application/routing/middleware#using-cookies). So you can do something like
 
-```ts
+```ts title="middleware.ts"
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
 

content/when-client-component-in-app-router.mdx

@@ -19,7 +19,7 @@ Do note that when a component X is imported to a client component Y, X is render
 
 In the following example
 
-```tsx
+```tsx title="client-component.tsx"
 "use client";
 import ServerComponent from "./server-component";
 
@@ -34,15 +34,15 @@ export default function ClientComponent() {
 
 `ServerComponent` is rendered as a client component, but in the following example
 
-```tsx
+```tsx title="client-component.tsx"
 "use client";
 
 export default function ClientComponent({ children }: { children: React.ReactNode }) {
   return <div>{children}</div>;
 }
 ```
 
-```tsx
+```tsx title="another-server-component.tsx"
 import ClientComponent from "./client-component";
 import ServerComponent from "./server-component";