Remark plugins

Custom remark plugins for enhanced Markdown processing

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

markdown-render.jsx

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`.