Abbr support

[jcubic]

In Jekyll, you can use abbreviations in markdown code like:

CSS is nice.

*[CSS]: Cascading Style Sheets

and CSS will be replaced with <abbr title="Cascading Style Sheets">CSS</abbr> (the last line will be removed from output) It would be nice if eleventy supports this as well. Or maybe you know any way to add this feature using plugins? I'm pretty new to Eleventy.

[pdehaan]

You might need to use https://github.com/markdown-it/markdown-it-abbr and then set a custom Markdown processor lib.

But it might be trickier if you want that to work in Nunjucks or LiquidJS templates.

[jcubic]

Thanks. Will check this out.

[pdehaan]

This might help you get started (or help a future traveller).

// .eleventy.js
const markdownIt = require("markdown-it");

module.exports = function (eleventyConfig) {
  const mdOpts = {
    html: true,
    breaks: true,
    linkify: true,
  };
  const mdLib = markdownIt(mdOpts)
    .use(require("markdown-it-abbr"));
  eleventyConfig.setLibrary("md", mdLib);

  return {
    dir: {
      input: "src",
      output: "www",
    },
  };
};

---
# ./src/index.md
title: 11ty-markdown-it-abbr test
layout: layouts/base
---

Some HTML and CSS are best. JS is rarely abbreviated.

{% include abbr %}

And my `./src/_includes/abbr.liquid file looks like this:

*[HTML]: Hyper Text Markup Language
*[CSS]:  Cascading style sheets
*[JS]: JavaScript

But by including the abbreviations as a partial, it would let you share them between templates potentially. One thing that didn't work when I tried, was specifying the abbreviations in a shared layout file. I guess the markdown processing happens before handing it off to a layout file or some parent template. 🤷