Eleventy Plugin Unified

Use the unified ecosystem in Eleventy.

You can render, transform and lint:

• markdown with the remark ecosystem.
• html with the rehype ecosystem.
• text with the retext ecosystem.

Requirements

• Eleventy 3.0.0 or higher
• Node.js 18 or higher

Install

npm install eleventy-plugin-unified remark-slug

// eleventy.config.js
import EleventyUnifiedPlugin from "eleventy-plugin-unified";

export default function (eleventyConfig) {
  eleventyConfig.addPlugin(EleventyUnifiedPlugin, ["remark-slug"]);
};

Then with a markdown file with:

# Hello, world

It will render like this:

<h1 id="hello-world">Hello, world</h1>

Plugin options

| Option | Description | Default | | ----------------------- | ------------------------------------------------ | ---------------- | | markdownTransforms | remark plugins for markdown processing | [] | | rehypePlugins | rehype plugins applied during markdown→HTML | [] | | htmlTransforms | rehype plugins for HTML post-processing | [] | | textTransforms | retext plugins | [] | | transformsDirectory | directory with your transforms | "." | | textParser | retext parser | retext-english | | reporter | vfile reporter | vfile-reporter | | addRenderMarkdownFilter | add renderMarkdown async filter | true |

Documentation

Configure options for transforms

Adding your own transforms

Using function plugins

Using rehype plugins during markdown conversion

Using the renderMarkdown filter

Using page context and eleventy data

• Logging the available data
• Re-using eleventy filters

Transforming markdown with remark

• Wrapping a table with a responsive container
• Style links that match the current page

Transforming html with rehype

Reporting and linting with retext

• Configuring the reporter
• Turning off default reporter
• Configuring text parser language

Configure options for transforms

// eleventy.config.js
eleventyConfig.addPlugin(EleventyUnifiedPlugin, {
  htmlTransforms: [["rehype-format", { indent: "\t" }]],
});

Adding your own transforms

// eleventy.config.js
eleventyConfig.addPlugin(EleventyUnifiedPlugin, [
  "./plugins/responsive-tables.js",
]);

or

// eleventy.config.js
eleventyConfig.addPlugin(EleventyUnifiedPlugin, {
  transformsDirectory: "./plugins",
  markdownTransforms: ["responsive-tables.js"],
});

Using function plugins

You can pass plugin functions directly instead of strings:

// eleventy.config.js
import remarkEmoji from "remark-emoji";

const myCustomPlugin = () => (tree) => {
  // transform the tree
  return tree;
};

eleventyConfig.addPlugin(EleventyUnifiedPlugin, {
  markdownTransforms: [
    remarkEmoji,
    myCustomPlugin,
    [myCustomPlugin, { option: "value" }], // with options
  ],
});

Using rehype plugins during markdown conversion

The rehypePlugins option applies rehype plugins during the markdown→HTML conversion, before the HTML is output. This is useful for transforming the HTML AST before it's serialized:

// eleventy.config.js
eleventyConfig.addPlugin(EleventyUnifiedPlugin, {
  markdownTransforms: ["remark-slug"],
  rehypePlugins: ["rehype-autolink-headings"],
});

Note: rehypePlugins is different from htmlTransforms. rehypePlugins runs during markdown processing, while htmlTransforms runs as a post-processing step on the final HTML output.

Using the renderMarkdown filter

The plugin adds an async renderMarkdown filter that uses the same processor as the markdown library. This is useful for rendering markdown content in templates:

{{ someMarkdownContent | renderMarkdown }}

{{ someMarkdownContent | renderMarkdown }}

The filter uses the same remark and rehype plugins configured for the markdown library, ensuring consistent rendering.

To disable the filter:

eleventyConfig.addPlugin(EleventyUnifiedPlugin, {
  markdownTransforms: ["remark-slug"],
  addRenderMarkdownFilter: false,
});

With thanks to

• Titus for the Unified ecosystem
• florianeckerstorfer/eleventy-plugin-remark