eleventy-plugin-modern

npm

An eleventy plugin with modern features.

Features

Install

npm i eleventy-plugin-modern

Add the plugin to your .eleventy.js file:

// .eleventy.js
const modern = require("eleventy-plugin-modern");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(modern());
};

PostCSS

You don't need to configure anything to use PostCSS. It's all done for you. The plugin watches all .css files in styles/ and process them with PostCSS.

Add a postcss.config.js file to your project root.

// postcss.config.js

module.exports = {
  plugins: [
    // require('autoprefixer')
  ],
};

TailwindCSS

Since TailwindCSS is a PostCSS plugin, you can use it by adding a plugin in postcss.config.js:

npm i tailwindcss autoprefixer

// postcss.config.js
module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
};

Then add a tailwind.config.js file to your project root:

// tailwind.config.js

module.exports = {
  content: ["./**/*.{njk,css}"],
};

Then add the css file in styles/:

/* styles/main.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

Syntax Highlight

This plugin enable the official syntax highlight plugin by default. You can add a prism theme to your template:

// your-template.njk

<head>
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.27.0/themes/prism.min.css">
</head>

Markdown Features

This plugin did some common config to the markdown processing library:

Set linkify: true
Use markdown-it-anchor plugin

You can also pass your own markdown-it options:

const modern = require("eleventy-plugin-modern");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(
    modern({
      markdownOptions: {
        html: true,
        breaks: true,
      },
    })
  );
};

customize Markdown-It

You can also customize the markdown-it instance:

module.exports = eleventyConfig => {
  eleventyConfig.addPlugin(modern({
    markdownIt(md => {
      md.use(/** ...*/)
    })
  }))
}