Remark and Rehype Unified Plugins

Remark and Rehype are plugins that adds features to

markdown
and mdx pages

They transform how the document are parsed and may add attribute, create component and more.

List

Base Built-in

The following plugins are always applied:

Remark:
- remark-parse for parsing Markdown
- remark-frontmatter for Frontmatter extraction
- remark-local-link-checker: Local Link checker to page and assets only in dev mode.
- remark-rehype to support rehype
Rehype:
- rehype-slug and rehype-extract-toc for the outline
- rehype-href-rewrite: IDE supports so that you can use the full path:
  - for a page. Example: my-page.mdx is rewritten to my-page
  - for a static asset in the public directory

Default

By default, we apply the Remark Gfm to add the GitHub Syntax

You can overwrite and set your own by applying a different configuration

Config

Above the mandatory plugin, you can define your own unified plugins

Example of configuration module with the actual config applied:

typescript

// ./config/markdown.config.ts
import remarkGfm from "remark-gfm";
import type {InteractMarkdownConfigType} from "@interact/markdown-config";

export const markdownConfig: InteractMarkdownConfigType = {
    remarkPlugins: [
        remarkGfm // Table
        // [ otherPlugin, props ] // example on how to pass props
    ],
    rehypePlugins: []
}
export default markdownConfig;

![Important] Be sure to add the remark-gfm plugin back in the list of remark plugins if you want it to be applied.

To define the location of the configuration file, you can:

create the config file config/markdown.config.ts or config/markdown.config.js from the root
or set the value in the markdown.configImportPath of the configuration file. If the value starts with a ., it's considered a path from the root directory otherwise, it's considered a module name to be searched from nodes_modules