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⎘ Copy
// ./config/markdown.config.ts
import remarkGfm from "remark-gfm";
import type {InteractMarkdownConfigType} from "@combostrap/interact/types";

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

Usage

They are used:

• when reading markdown page
• but also when writing markdown page for agents