A collection of custom remark plugins designed to enhance Markdown processing with extended syntax and embedded content capabilities. Installation
npm install remark-plugins remark-directive
# or
yarn add remark-plugins remark-directive
# or
bun install remark-plugins remark-directive
# or
pnpm add remark-plugins remark-directive
Ensure that remark-directive is installed and included before remark-plugins as it is a required peer dependency.
Usage
import ReactMarkdown from 'react-markdown';
import remarkDirective from 'remark-directive';
import { remarkCallout, remarkEmbed, slugifyHeading } from 'remark-plugins';
<ReactMarkdown
remarkPlugins={[remarkDirective, remarkCallout, remarkEmbed, slugifyHeading]}
>
{markdownContent}
</ReactMarkdown>;
Plugins
Callout Plugin
Transforms custom callout blocks in markdown into styled callouts.
::callout[warn]{title=Warning}
This is a custom note content.
:::
Embed Plugin
Transforms custom embed blocks in markdown into iframe embeds for YouTube, Vimeo, and other platforms.
::embed[youtube]{id=yaodD79Q4iE .some-class}
# or
::embed[iframe]{id=http://google.com .some-class}
Slugify Headings Plugin
Automatically generates slugified IDs for headings in markdown.
# My Heading
This heading will have an ID of `my-heading`.
