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.

Install

npm install eleventy-plugin-unified remark-slug

// .eleventy.config.cjs
const EleventyUnifiedPlugin = require("eleventy-plugin-unified");

module.exports = 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 | [] | | htmlTransforms | rehype plugins | [] | | textTransforms | retext plugins | [] | | transformsDirectory | directory with your transforms | "." | | textParser | retext parser | retext-english | | reporter | vfile reporter | vfile-reporter |

Documentation

Configure options for transforms

Adding your own transforms

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.js
eleventyConfig.addPlugin(EleventyUnifiedPlugin, {
  htmlTransforms: [["rehype-format", { indent: "\t" }]],
});

Adding your own transforms

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

or

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

With thanks to

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