eleventy-plugin-unified

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