Aquest blog usa la integració @astrojs/mdx.

Per què MDX?

MDX és una variant especial de Markdown que admet sintaxi JavaScript i JSX incrustada. Això permet barrejar JavaScript i components d’UI en contingut Markdown per a coses com ara gràfics interactius o alertes.

Exemple

Així és com s’importa i s’usa un component d’UI dins de MDX. Com pots veure, funciona igual que en un fitxer .astro. La directiva client és necessària per fer el component interactiu.

import DinoGame from '@components/DinoGame/DinoGame.tsx';

<DinoGame client:idle/>

Start

Score: 0

Més enllaços

• Documentació de sintaxi MDX
• Documentació d’ús a Astro
• Nota: Les directives de client segueixen sent necessàries per crear components interactius. En cas contrari, tots els components del teu MDX es renderitzaran com a HTML estàtic (sense JavaScript) per defecte.