remark-mdx-mappings

Remark plugin to add mappings of markdown nodes to MDX components (Astro style, i.e. with export const components = { ... }).

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 define a mapping from markdown nodes to MDX components to be used to render the respective elements.

Install

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

npm install remark-mdx-mappings

Use

import remarkMdx from 'remark-mdx';
import remarkMdxMappings from 'remark-mdx-mappings';
import remarkParse from 'remark-parse';
import { unified } from 'unified';

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

This markdown:

# Title

This image was taken from [Unsplash](https://unsplash.com/):

![A cat](./foo.jpg)

with this _components.ts file:

import { Link } from '@components/Link';
import { Image } from '@components/Image';

export const components = {
  img: Image,
  link: Link,
};

would use the Image and Link components from the _components.ts file to render images and links respectively.

Options

file?: string

Name of the file to lookup component mappings.