In the past 2024 year I found this amazing plugin for Astro and Next.js for making beautiful code snippets in Markdown files.

Here is how it is working:

example.tsx
import { FC, ReactNode } from 'react';


interface Props {
  title: string;
  children?: ReactNode;
}


const Example: FC<Props> = ({ title, children }) => {
  return (
    <div>
      <h1>{title}</h1>
      <div>{children}</div>
    </div>
  )
}


export { Example };