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
--- 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"} 
Top comments (0)