11ty - Markdown Paired Shortcode (for use in templates OTHER than .md)

.eleventy.js

// let's prep for the markdown stuff, add this to the top of your config
// we are using a plugin here, so markdown can be a truly worthy option
// don't forget to `npm markdown-it-attrs --save` into your project
const markdownIt = require("markdown-it");
const markdownItAttrs = require("markdown-it-attrs");

module.exports = function(eleventyConfig) {
  
// somewhere in your config block, add this stuff
// you can remove the `.disable('code')` part if you want
// the super important bit is `markdownLibrary.render(content)`
// for some reason the 11ty docs tell you to just use `content`... which does NOTHING
  let markdownLibrary = markdownIt().disable('code').use(markdownItAttrs);
  eleventyConfig.addPairedShortcode('md', function(content) {
    return markdownLibrary.render(content)
  });
// end

};

blah.njk

---
title: 'Blah Blah Blah'
---

<!-- // drop in your markdown -->
{%- md %}
  ## Markdown block { .text-4xl }
  Some paragraph { .opacity-70 aria-hidden=false }
{%- endmd %}

<!-- // use your `njk|liquid|whatever` code as normal -->
<ul class="grid(& cols-2) gap-16 lg:(grid-cols-5)">
  {%- for item in (items) %}
    <li>{{ item.title }}</li>
  {%- endfor %}
</ul>

<!-- // and another for good measure -->
{%- md %}
  Another [markdown](https://github.com/arve0/markdown-it-attrs){ data-modal=true } block { .text-center }
{%- endmd %}