11ty Markdown Attributes

I searched for a way to try and add attributes, such as class or id to markdown for a while. Using 11ty as my static site generator I've been using Nunjucks for templating and was able to add attributes in the that way. I was sure there must be a way of doing the same thing in Markdown. Luckily 11ty comes with a way of adding your own library instance to Markdown. The example show's how to use emoji plugin but I found markdown-it-attrs plugin which suited my purpose. This is basically how I went about adding it to my project.

Install libraries

npm install --save-dev markdown-it markdown-it-attrs

These will give the required libraries for adding to the project and add them to the package.json

Setup library instance {.article-heading}
Now we want to add the libraries for 11ty to pickup

.eleventy.js

module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("css");

  /**************** Markdown Plugins********************/
  let markdownIt = require("markdown-it");
  var markdownItAttrs = require('markdown-it-attrs');
  let options = {
    html: true,
    breaks: true,
    linkify: true
  };
  let markdownLib = markdownIt(options).use(markdownItAttrs);
  eleventyConfig.setLibrary("md", markdownLib);

  return {
    passthroughFileCopy: true,
    dir: {
      input: ".",
      includes: "_includes",
      data: "_data",
      output: "_site"
    }

  };
  /**************** END Markdown Plugins********************/
  return {
    passthroughFileCopy: true,
    dir: {
      input: ".",
      includes: "_includes",
      data: "_data",
      output: "_site"
    }

  };
};

Example of Usage

example.md

---
title: Template
layout: layouts/base.njk
tags:
    - post    
navtitle: Template
date: 2019-09-05
---
# header {.style-me}
paragraph {data-toggle=modal}

another bit of data {.class #identifier attr=value attr2="spaced value"}