Install

npm i --save remark-mdx-snippets
#or
yarn add remark-mdx-snippets
#or
pnpm add remark-mdx-snippets

About

Reusable and nestable snippets inspired by Mintlify

Usage

Remark

import remarkMDXSnippets from 'remark-mdx-snippets';
import {remark} from 'remark';

remark().use(remarkMDXSnippets).process(`<Snippet file="snippet.mdx" />`);

Markdown

1. Have a folder that stores snippets. By default the plugin checks the _snippets folder in your root directory.
2. In your markdown (.mdx):

## Some title

Any normal markdown content

<Snippet file="a-snippet-file.mdx" />

The plugin then checks your _snippets for a <file>.mdx In this example it finds a-snippet-file.mdx. THe content of the file is then resolved like it was written in the current markdown.

NB:

1. You can use snippets within snippets. (nesting)
2. You can have folders within the snippets directory, you don't have to put all snippets flat in that folder.

Configure

import remarkMDXSnippets from 'remark-mdx-snippets';
import {remark} from 'remark';

remark()
	.use(remarkMDXSnippets, {
		// Use a different directory to resolve snippets
		snippetsDir: path.resolve(process.cwd(), 'includes'),
		// Change attribute or element name
		fileAttribute: 'path',
		elementName: 'CodeSnippet',
		// Use a custom processor
		processor: unified().use(existingExtensions),
	})
	.process(`<CodeSnippet path="snippet/path.mdx" />`);

Sponsors ✨

Thanks goes to these wonderful people