custom-remark-rehype-plugins

Custom remark and rehype Plugins

next-markdown comes with some default remark and rehype plugins to ensure its basic functionality.

In some cases you might want to specify additional plugins to enrich your page with extra features.

How

You can pass custom remark and rehype plugins via the next-markdown initializer config.

import NextMarkdown from "next-markdown";

const nextmd = NextMarkdown({
  pathToContent: "./pages-markdown",
  remarkPlugins: [],
  rehypePlugins: [],
});

Example

npm install remark-prism
npm install rehype-accessible-emojis

import NextMarkdown from "next-markdown";
import remarkPrism from 'remark-prism';
import { rehypeAccessibleEmojis } from 'rehype-accessible-emojis';

const nextmd = NextMarkdown({
  pathToContent: "./pages-markdown",
  remarkPlugins: [remarkPrism],
  rehypePlugins: [rehypeAccessibleEmojis],
});

Demo

Here is how to run this demo

git clone https://github.com/frouo/next-markdown.git

cd next-markdown
npm install
npm run build

cd examples/custom-remark-rehype-plugins/
npm install
npm run dev

Open http://localhost:3000