remark-mdx-includes

Remark plugin to include other MDX files by ::include directive.

Content

• Content
• What is this?
• When should I use this?
• Install
• Use
  • Options
    • file?: string

What is this?

This package is a remark plugin that helps with MDX files.

When should I use this?

If you want to include other MDX files in the current file, e.g. to create partials like a footer.

Install

This package is ESM only. In Node.js (version 12.20+, 14.14+, or 16.0+), install with npm:

npm install remark-mdx-includes

Use

import remarkDirective from 'remark-directive';
import remarkMdx from 'remark-mdx';
import remarkMdxIncludes from 'remark-mdx-includes';
import remarkParse from 'remark-parse';
import { unified } from 'unified';

const processor = unified() //
  .use(remarkParse)
  .use(remarkDirective)
  .use(remarkMdx)
  .use(remarkMdxIncludes);

This markdown:

<Title text="Hello, world!" />

<Hero>
  I **am** a hero!
</Hero>

with this _components.ts file:

export { Hero } from './Hero';
export { Title } from './Title';

would compile without issues, using the exported components from _components.ts automatically.

Options

file?: string

Name of the file to lookup pre-defined component exports.