Question: Where does the switcher in code block markdown come from

[hieucchu-eh]

Summary

I see in nextjs docs they have a modifier syntax called switcher that applies to code block to generate the language dropdown

next.js/docs/01-app/01-getting-started/01-installation.mdx

Lines 156 to 166 in bd727d6

	```tsx filename="app/page.tsx" switcher
	export default function Page() {
	return <h1>Hello, Next.js!</h1>
	}
	```
	```jsx filename="app/page.js" switcher
	export default function Page() {
	return <h1>Hello, Next.js!</h1>
	}
	```

Where does this come from. I have tried to search through shiki, rehype, fumadocs mdx related stuff but cant find any reference to this. Can anyone enlighten me 🙏

https://nextjs.org/docs/app/getting-started/installation#create-the-app-directory

https://nextjs.org/docs/community/contribution-guide#code-blocks

Additional information

No response

Example

No response

[hieucchu-eh]

cc @delbaoliveira if you have any insight (sr for pinging, i notice you contribute to the docs folder)

[icyJoseph]

Hi, that one is custom made.

More stablished solutions out there may use this https://vitepress.dev/guide/markdown#code-groups, or something like Fumadocs does, https://fumadocs.dev/blog/v15#code-block-tabs

[hieucchu-eh]

oh tks, do u what should i be looking at to write my custom one, is it rehype?

[icyJoseph]

Yeah, something like https://github.com/ITZSHOAIB/rehype-code-group