Component directives

componentDirectives: boolean | string;

Map generic markdown directives to JSX components.

• default: false, no directives are mapped to components
• true, to enable mapping directives to components according to files with name _directives.ts
• <name>, to find directive mappings in files named <name>

These files should be simple JavaScript/ESM files (i.e. ES >=6), e.g.

import { CTA } from '@components/CTA';

export const directives = {
  callToAction: CTA,
};

…and then use it in your Markdown like this:

::callToAction[Dear Astronauts, grab your vacuum cleaner and dust off your MDX, now!]{href="https://www.npmjs.com/package/astro-m2dx"}

⚠️ Limitation: The names of the defined directives must be valid ES variable names, i.e. you can only use names, that you do not need to quote (especially: no snake-case).