Features

Default Frontmatter

Reduce the size of your frontmatter, by defining default properties in extra YAML files, that will be injected into all* MDX files.

You could use it to define a default layout property for all files.

Export components

Map HTML elements to JSX components: Define a mapping from standard HTML elements to complex JSX components for all* MDX files.

Auto import

Use JSX components in your MDX without import: Define a set of known JSX components, that can be used in all* MDX files without explicitly being imported.

Relative Images

All relative image references (textual values) with a resolvable reference are replaced with an imported image reference in the compiled MDX.

The resolution will also be applied to obviously relative image references in JSX components.

Style Directives

Use markdown directives to style elements, i.e. apply CSS classes to the generated HTML elements:
> :style{.warning} Warning: This is a warning!

⚠️ In order to use this feature, you must insert the plugin remark-directive before astro-m2dx.

Include directive

Modularize your content and include other MDX files in your MDX file with a ::include[./partial.mdx] directive.

⚠️ In order to use this feature, you must insert the plugin remark-directive before astro-m2dx.

Component directives

If you like pure Markdown style and prefer generic directives over embedded JSX components, this feature is for: map any directive to a JSX component.

⚠️ In order to use this feature, you must insert the plugin remark-directive before astro-m2dx.

Add-ons

Provide simple transformer functions to enhance the MDAST without writing a full plugin.

Inject raw MDX

Get (read-only) access to the (really) raw MDX content of your file.

Inject MDAST

Get (read-only) access to the MarkDown Abstract Syntax Tree, e.g. to transform to text or analyze for added meta-info in your layout.

Scan title

Scan the document content for the title.

Scan abstract

Scan the document content for the abstract.